I want a simple way to customise a component from within a CMS (content management system).

Injecting styles from a CMS is not simple.

Needing to rangle with template logic inside a HTML attribute (e.g. class, style) is not simple.

Needing utility classes is wasteful and removing unused classes is complex and brittle.

I should be able make an attribute, and put a value provided by the CMS into the attribute, and have CSS that works with every value of that attribute instead of needing pre-made styles or complex template conditions.

@spartanatreyu can you give an example?

I want a simple way to customise a component from within a CMS (content management system).

Injecting styles from a CMS is not simple.

Needing to rangle with template logic inside a HTML attribute (e.g. class, style) is not simple.

Needing utility classes is wasteful and removing unused classes is complex and brittle.

I should be able make an attribute, and put a value provided by the CMS into the attribute, and have CSS that works with every value of that attribute instead of needing pre-made styles or complex template conditions.

I work with CMS all the time, how would this feature work better than inputing that information into a custom property (--foo) and using that value?

PS: i too recall wanting this feature, but can't find my own use example in the hundreds of documents created ever since, not to mention since it didn't work i probably reworked it to be done in some other fashion.

CMS use case I’d have liked to support with attr(): Support object-fit in image tags.

What I want to do with this feature

Style images based on their focal point for better UX when images resize to fit different viewport widths. The CMS that calculates focal points outputs data- attributes, then site themes can decide if they want to write the needed styles in their stylesheets. CSS could look like this, defined once for all images site-wide:

[data-w-focus-x] {
  object-fit: cover;
  object-position: attr(data-w-focus-x) attr(data-w-focus-y);
}

What I'm having to do in the meantime

You need a JS polyfill or equivalent bespoke implementation, or write inline style attributes (which are incompatible with a strict CSP). Or you need to write inline style tags like this for every <img> tag:

<style nonce="[…]">
  #wagtail-image-abc123randomid {
    object-position: 45% 31%;
  }
</style>

This is very inelegant / verbose to write, and the CSP consideration adds a layer of complexity, that simply wouldn’t be there with attr() for arbitrary properties.

What I want to do with this feature

We're building a set of UI components that users can assemble into web pages. We want to dynamically assign an anchor name via prop, so that any element can be anchored to another.

<MyAnchorTarget data-anchor-name="--my-anchor-name" id="my-anchor-target-component" />

<MyToBeAnchored data-anchor-name="--my-anchor-name" id="my-to-be-anchored-component" />

<style>
  #my-anchor-target-component {
    anchor-name: attr(data-anchor-name)
  }
  
  #my-to-be-anchored-component {
    position-anchor: attr(data-anchor-name);
  }
  </style>

What I'm having to do in the meantime

The only way to do that now is by using the style attribute, like:

<MyAnchorTarget anchorName="--my-anchor-name" />

style={anchorName ? `position-anchor: ${anchorName};` : null}`

but using the style attribute is not compatible with CSP, so we're stuck at the moment with hard-coded values that are very limiting as you cannot have multiple instances of the same component on the page.