Request for comment: '>>>' (a shadow-piercing combinator) in static profile (under experimental flag)

90 views
Skip to first unread message

Takayoshi Kochi

unread,
Apr 9, 2018, 3:38:41 AM4/9/18
to blink-dev
Sending from the correct address again :(

(this mail is formatted like "intent to *", but not a formal one)

Primary eng (and PM) emails
ko...@chromium.org

Summary
A shadow-piercing descendant combinator (>>>) was defined
https://drafts.csswg.org/css-scoping/#deep-combinator
as a straightforward replacement for `/deep/` combinator (which was
for Shadow DOM V0), with a restriction that it is only allowed for selectors
in querySelector() (aka static profile, not in dynamic profile for styling).

It was implemented behind "experimental web platform features" flag
since late 2016 (crbug.com/633007). But the developer interest looks quiet
since then.

We could not provide good arguments for other vendors to get interested in
this feature to justify the need for this, without concrete use cases / feedback:
and this is very unlikely to be implemented by any other rendering engines, according
to feedback from Apple and Mozilla.

We would like to hear any feedback if you already have any experience using this
feature, or any reason not interested in this (except for not available in other browsers).

We'd like to conclude this feature depending on feedback for this, in a month
(thinking of by the end of April 2018).

Motivation
This is a feature behind the flag for some time now, but we would like to get
feedback from anyone to decide whether we will continue experimenting
or retire this.

Alternative implementation suggestion for web developers
Even though the current form of the proposal is not well accepted by other
browser vendors, we may explore and propose another possible shape of API
to make standardization progress going forward, given concrete feedback
for demand, or concrete use cases to fix any existing problem.

Currently this can be emulated by naive traversal to all trees, but it can be
slow.  One of the possible solution is to have a pseudo class that matches
elements that has shadow root (e.g. `:shadowhost`) - see my experiment
which had significant speedup in some cases in the past.

Use cases for testing (searching elements in the shadow-including trees),
i18n (replacing content depending locale), and accessibility was suggested,
even all those were valid use cases but the API had some limitation
(it only works for V1 open shadow trees, not closed ones) and cannot fulfill
their cases completely.

For styling (though it is not in the scope of '>>>', because we don't allow
this to be used in stylesheets), CSS Shadow parts will serve the purpose.

For internal users (within browser, e.g. Autofill or Translate) we might expose
the feature to the browser process in a different form.

Usage information from UseCounter
~0%

/deep/'s case.

Requesting approval to remove too?
Depends on the feedback.

--
Takayoshi Kochi

Takayoshi Kochi

unread,
Apr 9, 2018, 3:44:41 AM4/9/18
to blink-dev

Takayoshi Kochi

unread,
May 7, 2018, 5:16:15 AM5/7/18
to blink-dev
I got feedback from 6 people and one team privately.  Thanks to those who gave me feedback!
Let me summarize here.

Most feedback was that they don't need '>>>' combinator support for querySelector() as is,
except for testing.  It is useful for checking some element exists or not, or inspecting the element,
without worrying about shadow boundaries, and otherwise it could be polyfilled.

1. For testing, uniquely identifying an element is one of the requirements, and
sometimes '>>>' is not sufficient, because it can pierce zero or some shadow boundaries
and it can be difficult to pinpoint an element at specific levels of shadow trees.
So there should be another combinator that matches one level of shadow boundary
(in Shadow DOM V0 we had /deep/ and ::shadow exactly for this purposes).
One possible place to have this functionality is webdriver to get it used by Selenium etc.

2. When people really need this, they repeatedly implemented polyfills for the deep query selector,
which can be done in a recursive way for each shadow roots.  However, today we don't have
a fast way to identify shadow hosts among all elements, it costs O(N) where N is the number of
elements in a tree of trees. One possible solution is to add a new filter for TreeWalker API.

Unfortunately '>>>' didn't get support from other browser vendors and cannot live in
the standards, but the above two points would be sufficient for covering the expected
use cases.  (And for styling, CSS Shadow parts should work.)

If you see further missing use cases, please let us know.

In summary, the path forward is:
- propose addition to webdriver
- propose treewalker extension
- remove the under-the-flag `>>>` support from Blink

--
Takayoshi Kochi

Eric Bidelman

unread,
Jun 27, 2018, 7:06:37 PM6/27/18
to Takayoshi Kochi, lush...@chromium.org, blink-dev
Hi Takayoshi,

We still have need for this in Puppeteer and headless Chrome testing space. Has there been any progress on 
the TreeWalker additions or enabling a solution in Blink that is only exposed under testing scenarios?

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CADP2%3DhrjaMxniUhuLH2ijpcWTZuByh-S1ALCVnRW6RRGdVUGzw%40mail.gmail.com.
Reply all
Reply to author
Forward
0 new messages