// new and shiny
el.attributeStyleMap.set('opacity', '0.5');
typeof el.attributeStyleMap.get('opacity').value; // "number"

// Map-like
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.keys(); // Iterator
el.attributeStyleMap.values(); // Iterator
el.attributeStyleMap.entries(); // Iterator
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear();

el.attributeStyleMap.set('opacity', 3);
el.attributeStyleMap.get('opacity').value; // 3
el.computedStyleMap().get('opacity').value; // 1

el.attributeStyleMap.set('opacity', 'coral'); // TypeError

const transform = new CSSTransformValue([
  new CSSRotate(CSS.deg(0))
]);
el.attributeStyleMap.set('transform', transform);
(function draw() {
  requestAnimationFrame(draw);
  transform[0].angle.value += 5;
  el.attributeStyleMap.set('transform', transform);
})();

// types
CSS.px(10);
CSS.em(1.5);
CSS.rem('2');
CSS.deg(180);
CSS.rad(2);
CSS.number('100');
CSS.ms(300);
CSS.vw('10');
CSS.percent(50);

CSS.deg(90).to('rad').value;
// 1.5707963267948966

new CSSMathSum(CSS.vw(100), CSS.px(-10));
// calc(100vw - 10px);

CSS.px(1).add(CSS.px(2));
// {value: 3, unit: 'px'}

CSS.px(200).equals(CSS.px(200));
// true

CSS.registerProperty({
  name: '',
  inherits: true,
  syntax: '*',
  initialValue: ''
});

// styles.css
.tooltip {
  border-image-source: paint(tooltip);
}

// tooltip-worklet.js
registerPaint('tooltip', class {
  static get inputProperties() {
    return [];
  }
  paint(ctx, geometry, styleMap) {
    // paint stuff
  }
});

// my-layout-script.js
registerLayout('masonry', class {
  static get inputProperties() { return ['--foo']; }
  static get childrenInputProperties() { return ['--bar']; }
  static get childDisplay() { return 'normal'; }

  *intrinsicSizes(children, styleMap) {
    // Intrinsic sizes code goes here.
  }

  *layout(space, children, styleMap, edges, breakToken) {
    // Layout code goes here.
  }
});

/* main.css */
body {
  display: layout('masonry');
}