Opened on 01/21/2015 at 02:51:51 PM

Closed on 01/22/2015 at 03:26:41 PM

Last modified on 03/02/2018 at 10:46:26 AM

#1844 closed defect (rejected)

Element hiding filters don't match if they reference root node

Reported by: greiner Assignee:
Priority: P3 Milestone:
Module: Platform Keywords:
Cc: sebastian, trev, mjethani Blocked By:
Blocking: Platform: Chrome
Ready: no Confidential: no
Tester: Unknown Verified working: no
Review URL(s):



Ubuntu 14.04
Chrome 39

How to reproduce

  1. Add filter[data-player-size] #masthead-positioner to hide the YouTube header element only on the video pages
  2. Go to a YouTube video page (e.g.

Observed behaviour

YouTube header is shown.
This is because on Chrome/Opera/Safari the filter is converted into the selector ::content :root[data-player-size] #masthead-positioner. This selector is equivalent to html html[data-player-size] #masthead-positioner and therefore doesn't match.

Expected behaviour

YouTube header is hidden.

Attachments (0)

Change History (5)

comment:1 Changed on 01/22/2015 at 08:07:40 AM by sebastian

  • Blocked By 1802 added
  • Owner set to sebastian
  • Priority changed from Unknown to P3
  • Ready set

comment:2 Changed on 01/22/2015 at 09:14:50 AM by sebastian

  • Blocked By 1802 removed
  • Cc sebastian added
  • Owner sebastian deleted
  • Ready unset

Selector conversion

In order to match the element in the light DOM, the shadow root was created for, you have to use the :host() selector. In order to match it's descendants in the light DOM you have to use the ::content pseudo-element. Those can be combined, but it's non-trivial, and will slow down page load, not only on pages where the root element must be considered for element hiding.

For example:

:root[data-player-size] #masthead-positioner

Needs to be convert to (this requires parsing the selector):

:host([data-player-size]) ::content #masthead-positioner

But the selector might as well end after matching the root element:


In this case, we must not add the ::content pseudo-element:


And now it gets really funny. If the first element might be the root element or any other element:

*[data-player-size] #masthead-positioner

We have to expand it into two selectors:

:host([data-player-size]) ::content #masthead-positioner
::content *[data-player-size] #masthead-positioner

Skipping shadow DOM

First I thought we could maybe just insert the stylesheet in the light DOM, if one of the selectors might match the root element. But it turned out that this effectively means to not use shadow DOM anywhere, since all of the following selectors matches or might match the root element:



Fixing this issue will be fairly complicated, and probably not worth it, at least as long as there aren't any issues with popular filters lists on real websites that can't be worked around in a diffrent way. But for now it seems that fixing this issue will lead to more problems than it solves.

comment:3 Changed on 01/22/2015 at 03:26:41 PM by greiner

  • Resolution set to rejected
  • Status changed from new to closed

Those are all valid points. I'm resolving this issue as "rejected" for now. In case it becomes necessary at some point to target the root node we can reopen it again.

comment:4 Changed on 01/23/2015 at 02:13:27 PM by trev

  • Cc trev added
  • Platform changed from Unknown to Chrome

comment:5 Changed on 03/02/2018 at 10:46:26 AM by mjethani

  • Cc mjethani added
  • Tester set to Unknown
  • Verified working unset

Add Comment

Modify Ticket

Change Properties
as closed .
The resolution will be deleted. Next status will be 'reopened'.
to The owner will be changed from (none).
Note: See TracTickets for help on using tickets.