[color-scale] Experiments with handling complex CSS colors#214
[color-scale] Experiments with handling complex CSS colors#214DmitrySharabin wants to merge 1 commit intoissue-212from
Conversation
DmitrySharabin
force-pushed
the
issue-212-color-scale
branch
from
75472a3 to
a662e22
Compare
| let dummy; | ||
| if (document) { | ||
| dummy = document.createElement("div"); | ||
| document.body.appendChild(dummy); |
There was a problem hiding this comment.
We absolutely don't want our component modifying the light DOM to add elements, that's very much seen as an antipattern. But also, resolving based on <body> values is suboptimal, we want to resolve on the element itself.
If we went that route, we could have a shadow DOM dummy element to resolve with, but I'm not sure we need it. color-scale uses color-swatch, and all the resolving should happen there. Why does color-scale need to resolve anything?
There was a problem hiding this comment.
Okay, I'll give it another try
There was a problem hiding this comment.
Why does color-scale need to resolve anything?
<color-scale>s have the colors prop that should be initiated and parsed before any <color-swatch> can be created and rendered. If we don't resolve colors, Color.js will throw an error for any unsupported color, and the scale's color property will remain undefined. As a result, no color swatches will be created.
I might miss something, but I don't see a way to resolve colors on <color-swatch>s instead of on <color-scale>s. 🤷♂️
As an example:
There was a problem hiding this comment.
Oh, and I tried to use the element itself to resolve colors, but at the time the colors prop is initialized, this corresponds to the prop, not the element. So, if we decide to use a dummy element in the element's shadow DOM, I'm unsure how to access it when we need it.
There was a problem hiding this comment.
Hmm. Let me think about it. I wonder if the right solution involves changes to Color.js and Nude Element. I have some ideas.
DmitrySharabin
force-pushed
the
issue-212-color-scale
branch
from
a662e22 to
90f2bcc
Compare
2 participants
It makes things like this possible:
This is part 2 of 2 in a stack made with GitButler: