Closed Bug 992245 Opened 9 years ago Closed 5 years ago

[WebComponents] Implement :host pseudo class

Categories

(Core :: DOM: Core & HTML, defect, P2)

Product:
Core
Component:
DOM: Core & HTML
Type:
defect

Tracking

()

Status:
RESOLVED FIXED
Milestone:
mozilla61
Tracking Flags:
Tracking Status
firefox61 --- fixed

People

(Reporter: vingtetun, Assigned: emilio)

References

(Blocks 1 open bug,
URL
)

Details

(Keywords: dev-doc-complete)

Attachments

(4 files)

Part 1: Allow psuedo class to be optionally functional.
4.11 KB, patch
Details | Diff | Splinter Review
Part 2: Implement :host pseudo class matching.
3.02 KB, patch
Details | Diff | Splinter Review
tests
4.07 KB, patch
Details | Diff | Splinter Review
Bug 992245: Implement the non-functional :host selector.
59 bytes, text/x-review-board-request
xidorn
: review+
Details 
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)
URL: http://dev.w3.org/csswg/css-scoping/#...
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
Attached patch tests — — Splinter 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
Blocks: shadowdom-initial-release
Priority: -- → P3

    
    

    
  
Hi Ben, would you please confirm comment 6?
Flags: needinfo?(btian)

    
  
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

    
  
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 on attachment 8966020 [details]
Bug 992245: Implement the non-functional :host selector.

https://reviewboard.mozilla.org/r/234760/#review240460

::: 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+

    
    

    
  
Pushed by ecoal95@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/5a24374d10f7
Tests for non-functional :host selector. r=xidorn

    
  
Blocks: 1452640

    
    

    
  
https://hg.mozilla.org/mozilla-central/rev/5a24374d10f7
Status: NEW → RESOLVED
Closed: 5 years ago

          status-firefox61:
          --- → fixed
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

    
    

    
  
(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.
Keywords: dev-doc-needed → dev-doc-complete
Component: DOM → DOM: Core & HTML

          You need to log in
          before you can comment on or make changes to this bug.