Customized Builtins

[dandclark]

Description

Customized builtins allow developers to create customized elements that extend the behavior of native HTML elements.
https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example

They are implemented in Blink and Gecko but not WebKit.

Tests:
https://wpt.fyi/results/custom-elements/builtin-coverage.html
https://wpt.fyi/results/custom-elements/customized-built-in-constructor-exceptions.html
https://wpt.fyi/results/custom-elements/parser
https://wpt.fyi/results/custom-elements/reactions/customized-builtins

Specification

https://html.spec.whatwg.org/multipage/custom-elements.html#customized-built-in-element

Additional Signals

• Many many developer comments advocating for these in various threads, e.g. The is="" attribute is confusing? Maybe we should encourage only ES6 class-based extension. WICG/webcomponents#509 and https://bugs.webkit.org/show_bug.cgi?id=182671, Customized built-in elements WebKit/standards-positions#97
• Multiple polyfills have been built for this, for example https:/ungap/custom-elements-builtin (105 stars), https:/corpusculejs/custom-builtin-elements, https:/WebReflection/built-in-element
• WebComponents regularly show up as important to developers in surveys like the 2023 state of HTML survey where 42.9% of respondents had used WebComponents, or this MDN APIs & JavaScript survey where WebComponents were ranked as the top feature needing improvement.
• Many blog posts and articles have been written in favor of cusomized bultins. A few examples:
  • https://webreflection.medium.com/in-favor-of-custom-elements-built-ins-bae3f40f27d5
  • https://javascript.info/custom-elements#customized-built-in-elements
  • https://dev.to/steveblue/accessibility-with-customized-built-in-elements-2k8

[EisenbergEffect]

I thought we reached somewhat of a consensus at TPAC 2023 to work on custom attributes instead, since they would be able to do more than customized built-ins, without the issues that WebKit had raised.