Proposal: Custom attributes for all elements, enhancements for more complex use cases
This proposal introduces an API for defining custom attributes for both built-ins and custom elements, and design discussion for an API that can be used to define more complex enhancements that involve multiple attributes, methods, JS-only properties etc. This came out of the [TPAC extending built-ins breakout](https://github.com/w3c/tpac2023-breakouts/issues/44), and some follow-up discussions with @keithamus. ## Defining attributes: The `Attribute` class ### Use cases - Augmenting existing elements (either built-ins or custom elements) with custom attributes that trigger custom behaviors - Easier definition of a web component's *own* attributes, as this automatically takes care of property-attribute reflection, typing, default values etc, one of the biggest pain points of defining WCs without helpers ### Prior art - [Original custom attributes proposal (naming only)](https://github.com/whatwg/html/issues/2271) - [@lume's custom attributes proposal](https://github.com/lume/custom-attributes) - [LitElement properties](https://lit.dev/docs/components/properties/) - [VueJS props](https://vuejs.org/guide/components/props.html#prop-validation) ### Needs - Lifecycle hooks: connected, disconnected, changed - Default values - Optional typing ### API sketch * Subclasses that extend a base Attribute class * Static `HTMLElement.attributeRegistry` property which is an AttributeRegistry object. Attributes can be registered generically on `HTMLElement` to be available everywher
Posted by LeaVerou on Sep 13, 2023, 6:12 PM
Tags
Related issues
- [Meta] Feedback on granular control over Copilot changes
- unexpected status 401 Unauthorized issue
- [MODEL] Measurable quality regression in Claude generation 5 (Fable 5 / Opus 5 / Sonnet 5): worse nonsense detection, ~2x verbosity, under-disclosed model fallb
- [CRITICAL] Subagent spawning and subagent pattern bugs trigger infinite recursion, infinite token usage, grossly inefficient token usage, and lost accumulated s
- Video stops playing after some minutes
- [MODEL] Claude verbose code comments by default — ignores instructions to stop.
Raise real-world problems, find people facing the same issue, and discuss solutions.2,000 issues0 comments
github (Software)
[Meta] Feedback on granular control over Copilot changes
unexpected status 401 Unauthorized issue
[MODEL] Measurable quality regression in Claude generation 5 (Fable 5 / Opus 5 / Sonnet 5): worse nonsense detection, ~2x verbosity, under-disclosed model fallb
[CRITICAL] Subagent spawning and subagent pattern bugs trigger infinite recursion, infinite token usage, grossly inefficient token usage, and lost accumulated s
Video stops playing after some minutes
[MODEL] Claude verbose code comments by default — ignores instructions to stop.
Scope Codex VS Code chats to the current workspace/project
Update on "Co-authored-by: Copilot" in commit messages
Proposal: Custom attributes for all elements, enhancements for more complex use cases
This proposal introduces an API for defining custom attributes for both built-ins and custom elements, and design discussion for an API that can be used to define more complex enhancements that involve multiple attributes, methods, JS-only properties etc. This came out of the [TPAC extending built-ins breakout](https://github.com/w3c/tpac2023-breakouts/issues/44), and some follow-up discussions with @keithamus. ## Defining attributes: The `Attribute` class ### Use cases - Augmenting existing elements (either built-ins or custom elements) with custom attributes that trigger custom behaviors - Easier definition of a web component's *own* attributes, as this automatically takes care of property-attribute reflection, typing, default values etc, one of the biggest pain points of defining WCs without helpers ### Prior art - [Original custom attributes proposal (naming only)](https://github.com/whatwg/html/issues/2271) - [@lume's custom attributes proposal](https://github.com/lume/custom-attributes) - [LitElement properties](https://lit.dev/docs/components/properties/) - [VueJS props](https://vuejs.org/guide/components/props.html#prop-validation) ### Needs - Lifecycle hooks: connected, disconnected, changed - Default values - Optional typing ### API sketch * Subclasses that extend a base Attribute class * Static `HTMLElement.attributeRegistry` property which is an AttributeRegistry object. Attributes can be registered generically on `HTMLElement` to be available everywher
Comments (0)
No comments yet. Start the discussion.