[WebComponents] Implement :host pseudo class

RESOLVED FIXED in Firefox 61



5 years ago
2 months ago


(Reporter: vingtetun, Assigned: emilio)


(Blocks 1 bug, {dev-doc-complete})

Dependency tree / graph

Firefox Tracking Flags

(firefox61 fixed)




(4 attachments)

Just looking at some tutos in both Chrome and Firefox and it seems like the :host rule demo at http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-host does not work as expected in Firefox.

(This is with dom.webcomponents.enabled = true).
I'm mostly concerned about the ability to react to user states. Fwiw the first demo seems to not work in Firefox, while the second demo (related to handling user state, does not seems to work in both Firefox nor Chrome 35 on my laptop)
Summary: [WebComponents] :host rule does not seems to work in http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/#toc-style-host → [WebComponents] Implement :host pseudo class
Posted patch testsSplinter Review
These patch builds on top of things in bug 1082060, so that bug needs to be sorted out first.
Do we still need this with Shadow DOM v1?
Assignee: wchen → nobody
Priority: -- → P3
Hi Ben, would you please confirm comment 6?
Flags: needinfo?(btian)


2 years ago
Flags: needinfo?(btian)
(In reply to Andrew Overholt [:overholt] from comment #6)
> Do we still need this with Shadow DOM v1?

Yes we still need this per https://drafts.csswg.org/css-scoping/#host-selector.
Priority: P3 → P2


2 years ago
No longer blocks: shadowdom-initial-release
This selector is not as gross as :host-context, I think (i.e., it's doable to make it fast), but I think there are spec issues to sort out. Not that they necessarily block the implementation I guess, but worth taking them into account...
https://www.xfinity.com/support/articles/forward-calls-using-xfinity-mobile-app is broken with Shadow DOM because of this. At least we should implement the selector-less variant.
https://www.chromestatus.com/features seems another broken page due to this.
I added some infra for this in https://github.com/servo/servo/pull/20243. Will finish this up. I'll add support for the functional version of it in a followup bug.
Assignee: nobody → emilio
here's a basically untested try run: https://treeherder.mozilla.org/#/jobs?repo=try&revision=8c1e2bfab648c820870146cbb0b38342f194932b

I only checked that this fixed the size of the icons in the footer of https://www.polymer-project.org/2.0/docs/devguide/feature-overview with the shadow DOM pref enabled.

Need to check cascade order and such.
It also seems to fix the XFinity stuff.
Comment hidden (mozreview-request)
Comment hidden (mozreview-request)
Comment hidden (mozreview-request)

Comment 18

a year ago
Comment on attachment 8966020 [details]
Bug 992245: Implement the non-functional :host selector.


::: commit-message-efc15:6
(Diff revision 3)
> +I didn't use the non_ts_pseudo_class_list bits because as soon as we implement
> +the :host(..) bits we're going to need to special-case it anyway.

Actually, I have a feeling that `:host` should probably be handled as a tree-structure pseudo-class in selector crate instead.

::: servo/components/style/stylist.rs:1956
(Diff revision 3)
> +    /// Also, note that other engines don't accept stuff like :host::before /
> +    /// :host::after, so we don't need to store pseudo rules at all.

Does the spec say so? If not, probably worth a spec issue to make it clear one way or the other and have tests for it?

::: testing/web-platform/tests/css/css-scoping/host-cssom-001.html:2
(Diff revision 3)
> +<!doctype html>
> +<title>CSS Test: :host in CSSOM</title>

Methods like matches, querySelector, etc. are defined in DOM standard. They are not part of CSSOM.

CSSOM is for operating CSS, while these methods are getting elements, so they shouldn't be considered CSSOM.

You probably should rename this test.

::: testing/web-platform/tests/css/css-scoping/host-descendant-invalidation.html:2
(Diff revision 3)
> +<!doctype html>
> +<title>CSS Test: :host is accounted for during invalidation</title>

"invalidation" is not something related to the spec... Maybe some title like "element style is correctly updated for rule with :host" is better for a wpt.
Attachment #8966020 - Flags: review?(xidorn+moz) → review+

Comment 19

a year ago
Pushed by ecoal95@gmail.com:
Tests for non-functional :host selector. r=xidorn


a year ago
Blocks: 1452640

Comment 20

a year ago
Last Resolved: a year ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla61
Created web-platform-tests PR https://github.com/w3c/web-platform-tests/pull/10387 for changes under testing/web-platform/tests
Upstream PR merged
(In reply to Hsin-Yi Tsai [:hsinyi] from comment #11)
> https://www.chromestatus.com/features seems another broken page due to this.

FWIW, this is the only case that these patches didn't fix, and it was because of broken feature detection in their side. As soon as I removed Element.createShadowRoot in https://bugzilla.mozilla.org/show_bug.cgi?id=1453789 this started working.
BCD was already updated; updated Firefox 61 for developers as well.
Component: DOM → DOM: Core & HTML
Product: Core → Core
You need to log in before you can comment on or make changes to this bug.