26 lines (21 loc) · 1.11 KB

CSS Typed `attr()` new capabilities

<ui-rating data-rating="4.5"></ui-rating>

ui-rating {
  --percent-fill: calc(attr(data-rating type(<number>)) * 20%);
  background: linear-gradient(to right, gold var(--percent-fill), transparent var(--percent-fill));
}

With the ident() function

--bg: attr(variant type(<custom-ident>));
--background-color: ident("--c-tag-" var(--bg) "-bg");