You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Nov 16, 2021. It is now read-only.
In theory, a thing style-only-shadow could work for low-specificity styles on DOM level.
E.g. consider the following structure borrowed from the amp-selector spec. All of the contents of the amp-selector are in the light DOM. But the runtime could inject light shadow DOM subtrees with styles.
<amp-selector>
<div option="value1" selected>
#shadow-root <-- this is inserted by the framework
<slot></slot> <-- propagate all DOM out
<style>
:host([selected]) { <-- :host will have a low specificity
outline: 1px solid blue;
}
:host:hover {
outline: 1px solid lightgray;
}
</style>
</div>
</amp-selector>
For more complicated trees, ::slotted can be similarly used.
Nuances to consider:
Performance of adding shadow root where it's otherwise not needed. Adoptable stylesheets could help a lot.
Related to #12.
In theory, a thing style-only-shadow could work for low-specificity styles on DOM level.
E.g. consider the following structure borrowed from the amp-selector spec. All of the contents of the
amp-selectorare in the light DOM. But the runtime could inject light shadow DOM subtrees with styles.For more complicated trees,
::slottedcan be similarly used.Nuances to consider:
:host()browser support.