Custom Element, Two ways

Sometimes I build a custom element, and then I have second thoughts about it.

hotpink
teal
#22f6
#f226

The first is just a clever use of CSS. The second (‘real’) custom element simplifies the markup, but adds a JS dependency. The markup:

<code style="--swatch: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?

See the Pen custom element, two ways by @miriamsuzanne on CodePen.