> @hayato: Can you verify whether /deep/ not working in JS is expected for Shadow DOM v1?

Correct. v1 doesn't support /deep/ even in JS.

The followings can be helpful to understand the situation:
- https://bugs.chromium.org/p/chromium/issues/detail?id=829713
- https://github.com/w3c/webcomponents/issues/78

@hayato: Thanks for the context. One use-case that I don't think it was mentioned in the Github issue was the one used by Chrome, meaning using /deep/ to find and remove previously added text highlights (yellow rectangles) throughout the entire document for searching (see attachement).  I know native Find-in-page (Ctl+f) does a similar thing, but unfortunately that is also not sufficient (does not work with lazy-rendered elements).

It's unfortunate that there is no way to query the entire DOM anymore, even for static profile, and even though from the discussion it seems that this would not impose any overhead to dynamic profiles anyway.

I agree with comments on the Github issue that this will result in mulitple authors rolling their own solution for this.


Anyway, our custom solution for Chrome, is to manually keep track of all added highlights in memory so that they can be removed later without the need for searching. Essentially we are caching state that already exists on the DOM but it it not easily query-able. 

Candidate CL at https://chromium-review.googlesource.com/c/chromium/src/+/1100102.

Deleted: clear_highlighs.png 63.3 KB

	clear_highlighs.png 63.3 KB View Download

+fergal@ FYI this case looks like CSS shadow parts (esp, ::theme) can be used.
CSS shadow parts: https://tabatkins.github.io/specs/css-shadow-parts/ or issue 805271

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/d3238d264746a58d6733abda0e7099a8666cfba6

commit d3238d264746a58d6733abda0e7099a8666cfba6
Author: rbpotter <rbpotter@chromium.org>
Date: Mon Jun 18 19:30:34 2018

WebUI Polymer2: Fix highlight removal (Settings and Print Preview)

Since /deep/ is deprecated in shadow DOM v1, track highlights and
search bubbles as they are added to avoid searching recursively to
remove them later.

Bug:  852098 
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: Iac61a1f340ae4029589556c3ad09e567126a1639
Reviewed-on: https://chromium-review.googlesource.com/1100102
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#568108}
[modify] https://crrev.com/d3238d264746a58d6733abda0e7099a8666cfba6/chrome/browser/resources/print_preview/new/advanced_settings_dialog.js
[modify] https://crrev.com/d3238d264746a58d6733abda0e7099a8666cfba6/chrome/browser/resources/print_preview/new/advanced_settings_item.js
[modify] https://crrev.com/d3238d264746a58d6733abda0e7099a8666cfba6/chrome/browser/resources/print_preview/new/destination_list.js
[modify] https://crrev.com/d3238d264746a58d6733abda0e7099a8666cfba6/chrome/browser/resources/print_preview/new/destination_list_item.js
[modify] https://crrev.com/d3238d264746a58d6733abda0e7099a8666cfba6/chrome/browser/resources/print_preview/new/highlight_utils.js
[modify] https://crrev.com/d3238d264746a58d6733abda0e7099a8666cfba6/chrome/browser/resources/settings/search_settings.js
[modify] https://crrev.com/d3238d264746a58d6733abda0e7099a8666cfba6/ui/webui/resources/js/search_highlight_utils.js

Closing this bug since this particular issue is fixed. Having said that, there are a lot more places we need to stop using /deep/, which is going to be a challenge, tracked by issue 860069.