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
Create function MyStyleMixin with static get styles defined. For instance:
constMyStyleMixin=(superclass=>classMyStyleMixinextendssuperclass{staticgetstyles(){return[css` div { border: 2px solid blue; }`];}});
Create class MyStyledElement that applies MyStyleMixin and extends LitElement.
Define a render function that are styled by MyStyleMixin. Define it as custom element my-styled-element.
For instance :
classMyStyledElementextendsMyStyleMixin(LitElement){render(){returnhtml`<div>Styles should be applied here</div>`;}}customElements.define('my-styled-element',MyStyledElement);
Instantiate <my-styled-element></my-styled-element> on a page.
Expected Results
<my-styled-element> has a div with a blue 2px border.
Actual Results
<my-styled-element> has no styling at all.
Browsers Affected
Chrome
Firefox
Edge
Safari 11
Safari 10
IE 11
Versions
lit-element: v2.0.0-rc.3
webcomponents: v2.2.3
The text was updated successfully, but these errors were encountered:
I have also noticed that while working on web-padawan/lit-components#30. Had to tweak the code when updating to 2.0.0-rc.3 and make sure the class extension in the tests does the following:
staticgetstyles(){returnsuper.styles;}
For me it was an acceptable tradeoff, but in general it looks like a regression.
@web-padawan : Yeah, I also already did this in my code as a workaround :)
But we have quite a few mixins that share styles and it feels a bit hacky to me if we have to trigger the LitElement like this everytime.
Thanks for fixing the issue @azakus, pretty smart to check every level via finalize 👍 Was there a particular reason to rename it from _finalizeto finalizeif I may ask?
Description
Live Demo
https://stackblitz.com/edit/lit-element-request-update-bug-lspgdq?file=test.js
Steps to Reproduce
MyStyleMixin
withstatic get styles
defined. For instance:MyStyledElement
that appliesMyStyleMixin
and extendsLitElement
.Define a
render
function that are styled byMyStyleMixin
. Define it as custom elementmy-styled-element
.For instance :
<my-styled-element></my-styled-element>
on a page.Expected Results
<my-styled-element>
has a div with a blue 2px border.Actual Results
<my-styled-element>
has no styling at all.Browsers Affected
Versions
The text was updated successfully, but these errors were encountered: