`::selection`, `::target-text`, `::highlight`, `::spelling-error`, `::grammar-error` style should propagate across shadow boundaries

[mantou132]

Custom elements within the page should inherit the document's ::selection, ::target-text, ::highlight, ::spelling-error, ::grammar-error style by default, otherwise each custom element needs to be inherited manually.

example: https://codepen.io/mantou132/pen/mdvQMwz?editors=0110

Chrome current inherit: https://issues.chromium.org/issues/381335069 , but something strange:

Firefox not inherit: https://bugzilla.mozilla.org/show_bug.cgi?id=1868009

[schenney-chromium]

Chrome works because Chrome has implemented the Highlight Inheritance model, whereas Firefox has not. The Highlight Inheritance spec does not say anything specific about shadow roots or flat tree but maybe it should?

[mantou132]

Hi, would you like to ask if the working group has discussed this issue? Currently, neither Safari nor Firefox inherits the highlight style in Shadow DOM.

[castastrophe]

I do see this line in the spec which could imply crossing shadow boundaries but I agree, maybe it should be more explicit? cc @astearns @fantasai listed as editors

The highlight pseudo-elements do not necessarily fit into the element tree, and can arbitrarily cross element boundaries without honoring its nesting structure. cite

[schenney-chromium]

I added Agenda+ because it seems there may be disagreement or varying use-cases for the highlight inheritance crossing shadow boundaries, but then again I see no other way this could work and that it is consistent with typical behavior for other properties. I believe the current intent is for highlight inheritance to cross shadow boundaries because we would expect the page to have a consistent selection and highlight styling unless the component explicitly defines otherwise (which would then be inherited within the component).

So this really is just editorial. Two things to address:

• The cited text in the comment above. Honestly it makes no sense to me at all.
• The text in https://drafts.csswg.org/css-pseudo-4/#highlight-cascade that says: "its specified value is determined by inheritance from the corresponding highlight pseudo-element of its originating element’s parent element." to make clear that it's parent or host when parent is a ShadowRoot, or that it's working in the flat tree.