Re: [css-houdini-drafts] [css-typed-om-2] Spec up URIValue, ShapeValue, StringValue, CounterValue, TimeValue, PercentageValue, FrequencyValue, VoiceValue, CustomIdentValue, TransitionTimingFunctionValue. What is attr(<identifier>) in other specs?

Dropping a message to voice support for the value of `attr()` to be supported in CSS OM 2. One of the things I'm very excited by in Houdini is to get the best of both technologies like WebGL/2D Canvas and HTML. Where WebGL/2D Canvas gives developers complete flexibility over how content is displayed and HTML ensures that websites/apps can be interpreted by machines (especially important for A11Y).

By making the value of `attr()` available to these new APIs, combined with CSS paint/layout APIs, we can make portable and complex visual styles. An almost-there example of this is [this threejs+CSS paint api example](https://github.com/AdaRoseCannon/three-paint) which shows enormous potential for making complex styles more modular and portable. However, unfortunately in this context the text has to be [set manually](https://github.com/AdaRoseCannon/three-paint/blob/master/src/main.js#L50) which breaks the declarative advantages that CSS paint api brings to the table.

It would be amazing to be able to do something like this:

HTML
```
<div id="stage" aria-label="3D Website heading"><h1>3D Website heading</h1></div>
```

CSS
```
#stage {
 --content: attr(aria-label);
 background-image: paint(3DText);
}
#stage h1 {
 visibility: hidden; /* This way we still get the correct size of the typography for use later */
}
```

JS
```
registerPaint(
 "3DText",
 class {
  static get inputProperties() {
   return ["--content"];
  }

  paint(ctx, size, props) {
   3DText.setContext(ctx);
   3DText.setText(props.get("--content"));
   3DText.setSize(size);
  }
 }
);
```

Apologies if this is the incorrect place for this!

-- 
GitHub Notification of comment by jonnyscholes
Please view or discuss this issue at https://github.com/w3c/css-houdini-drafts/issues/158#issuecomment-404989923 using your GitHub account

Received on Saturday, 14 July 2018 01:41:59 UTC