lit-element
lit-element copied to clipboard
lit
Component styles are unusable/vestigial when render root is not a shadow root
TL;DR
I would like to request that LitElement do something useful with styles when the render root is not a shadow root, or else make it easier for an inheriting implementation to take advantage of whatever work has been done to process styles.
Description
I am trying to build a component that does not use a shadow root as its render root (it uses itself).
When the render root of a LitElement is anything other than a shadow root, styles defined by the component are ignored. See: https://github.com/Polymer/lit-element/blob/41e9fd3b8c18b3070f9df2a2f21915b796b2b298/src/lit-element.ts#L135-L138
As the author of the component I am building, I can imagine useful things that LitElement might do by default - and alternatively useful things I could do with special knowledge of my use case - with the style information available.
As a detail of element construction, LitElement's private implementation does in fact do some processing of the styles and collect an array where they are helpfully unique-ified: https://github.com/Polymer/lit-element/blob/41e9fd3b8c18b3070f9df2a2f21915b796b2b298/src/lit-element.ts#L132
Unfortunately, all of the implementation surrounding this processing of styles is marked private (including the array of unique-ified styles), so it is not possible for an inheriting implementation to do something useful with the _styles property of the component.
It seems like there is work being done unnecessarily for this case, and frustratingly there is no good way to avoid duplicating some of that work or taking advantage of its product. Can that be fixed?
Versions
- lit-element: v2.1.0
We can likely make the API easier to override here but the behavior will likely need to be customized by users since knowing what to do with shared styles is not something the library can really decide.
@sorvell totally understood, just want to offer that what currently happens (work that cannot be prevented or used by an inheriting class) is sub-optimal and suggest that some kind of escape-hatch should exist.
I don 't know i f resolve your problem i made a tool to ereditate in the shadowdom the outside style: without lost advantages of shadowdom. (styles enter but cant exit from webcomponent) npm: lit-css-global-scope i hope can bue helpfull
Some related discussion happened today on Twitter: https://twitter.com/serhiikulykov/status/1310851405792583680?s=20
One seemingly obvious (but perhaps flawed) solution to this problem would be to make the list of unique-ified styles protected instead of private. What do y'all think?
Closing for the related lit/lit issue (which we may re-open): https://github.com/lit/lit/issues/1977
