Attempt to eliminate the flash of undefined custom elements #190
Conversation
✅ Deploy Preview for color-elements ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| :is(${ colorTags.join(", ") }) { | ||
| opacity: 0; | ||
|
|
||
| body:not(.loading-global-color-element-styles) &:defined { |
There was a problem hiding this comment.
Also, ideally this should be solved in Nude Element (via a mixin): components should define their dependencies via a static property, and then these styles are generated for all dependencies.
| @@ -80,6 +89,23 @@ const Self = class ColorElement extends NudeElement { | |||
| } | |||
|
|
|||
| customElements.define(this.tagName, this); | |||
|
|
|||
| if (this.globalStyle) { | |||
| // NudeElement imports global styles using `@import url()` inside an `<style>` element with a `data-for` attribute equal to the element's tag name | |||
There was a problem hiding this comment.
Yeah, looks like this was a bit overfit. We should definitely support verbatim styles being included, not just URLs. We could probably even detect the two so the user can just give us an array of strings
There was a problem hiding this comment.
That's a very good idea. With something like this do: nudeui/element#43?
It allows us completely remove this code block. Probably, we won't need this PR at all, if we implement your proposal above. We'll see. 🙂
The proposed change is very well observed in the
<color-chart>element: https://deploy-preview-190--color-elements.netlify.app/src/color-chart/