hotpinkteal#22f6#f226
The first is just a clever use of CSS. The second (registered) custom element simplifies the markup, but adds a JS dependency. The markup:
<code style="--color-tile:hotpink">hotpink</code><color-tile>teal</color-tile>
Maybe that small syntax improvement is a job for HTML templating, rather than a custom element?
If we had support
for the full attr() function
in CSS,
we could simplify
the CSS markup.
Now it’s a custom attribute,
instead of a custom element:
<code color-tile="hotpink">hotpink</code>
Down the road I can imagine more interactive features for the component. That could sway things towards use of JS. But still – is it a custom element? I’m not sure.
What do you think?