CSS :host() does not work #2144
Comments
|
update to lit Solved: :host() and encapsulation works again. somehow I circled back to The problem was probaly caused by instructions saying to use |
|
@busynest static styles = css`
p {
color: green;
}
`;static get styles() {
const mainColor = css`red`;
return css`
div { color: ${mainColor} }
`;
}is that the first will only be evaluated once, and so the second form is intended for use with expressions (since it is a getter function), such that say if that Not sure if that applies to your use case since I don't know the full CSS. I think an exception to the first case would be if you used CSS custom properties? In that case you could avoid having to implement the second variant and still get the performance benefit of the former. I may be wrong, but just my thoughts on the subject, hopefully someone can help confirm for you. |
|
A static field and getter should behave the same. The only reason we ever showed the static getter is because fields weren't standardized quite yet. We don't call the getter multiple times. |
|
Seems like "polyfill-support.js" was not loading, but works now. But this glitch was nice to see how Typescript merges everything into top-level application. |
|
Closing since this appears to be resolved. Feel free to re-open with more info if the problem persists. Thanks. |
Description
Jacek Markiewicz
To make :host() work again. Stopped working after upgrade.
To encapsulate CSS within element, without leaking out.
Example: All various
form{}properties effect a form that is suppoed to be encapulated.adding and removing
<script src="node_modules/lit/polyfill-support.js">causes weird breaks (mostly toast and drawer) , but doesn't help.Project:
From what I can tell, maybe typescript merge brings everything together in a non encapsulated way.
I also tried
static get styles()vsstatic stylesThe text was updated successfully, but these errors were encountered: