Customized built-in elements

[annevk]

Request for position on an emerging web specification

Information about the spec

• Spec Title: Customized built-in elements
• Spec URL: https://html.spec.whatwg.org/multipage/custom-elements.html#customized-built-in-element

Bugs tracking this feature

• WebKit Bugzilla: https://bugs.webkit.org/show_bug.cgi?id=182671

Anything else we need to know

WebKit supports autonomous custom elements, but hasn't implemented this aspect of custom elements.

Colleagues and I wanted to share our thinking around that in this issue and also open it up for feedback from the community.

[annevk]

Custom elements give web developers the power to create their own HTML elements. The idea behind customized built-in elements is to give web developers a similar power, but starting from an existing HTML element. Essentially subclassing it. The main use cases driving customized built-in elements are:

• Enhancing existing form controls.
• Inheriting accessibility logic from the existing elements.
• Progressive enhancement due to fallback to the existing elements.
• Supporting the special HTML parser behavior of existing elements, such as td or template.

Customized built-in elements attempts to achieve this through an is attribute, e.g., <input is=my-input>. (The reason it’s not <my-input extends=input> is because it was deemed too hard to change implementations to key internal logic on the element type rather than the local name and namespace pair.)

Colleagues and I are interested in addressing these use cases, but thus far we haven’t been convinced customized built-in elements is the way to do it:

• Thanks to form-associated custom elements, the main use case for customized built-in elements has a better solution that gives developers a lot more flexibility.
• Thanks to ElementInternals and ARIAMixin, autonomous custom elements have pretty good accessibility support that we plan to expand even further.
• Customized built-in elements cannot have access to shadow trees (with a couple minor exceptions) or ElementInternals by design, making them a kind of second-class custom element.
• Customized built-in elements also cannot realistically have good accessibility support built-in as they are logically different from the element they extend. Therefore customizations with respect to the accessibility tree are still needed, but would only be possible through the public ARIA API as ElementInternals is not available.
• For much the same reason we think the progressive enhancement use case falls short of meeting its goal. Using child elements is the established way in HTML to provide fallback contents. E.g., this is how canvas and picture approach it.
• The syntax used prioritizes implementers over web developers which is wrong per the Priority of Constituencies.

The main compelling use case to us at this point is the HTML parser use case and we’d love to jointly dive into that deeper to see if we can come up with a better solution that comes with fewer drawbacks. whatwg/html#8114 is probably a good place for that particular discussion.

[WebReflection]

I think there are tons of arguments for desiring cross-browser builtin extends out of the box within the linked bug, so I won't repeat myself or other developers findings and otherwise-impossible improvements builtin extends bring compared to Shadow DOM but this point in particular makes me very curious:

Customized built-in elements also cannot realistically have good accessibility support built-in

in my experience it has the best accessibility support because developers don't need to do anything to add standard builtin accessibility to elements that already support that, so I'd like to hear, or better understand, in which case builtin extends makes accessibility worse.

One missing point though is the ability to extend elements in the HEAD of a site, being that for runtime import maps, meta, even title, or literally any other element that doesn't need Shadow DOM but it's crucial to describe a document and its expected behavior.

[romainmenke]

One aspect not yet listed is that customized built-in elements do not load/initialize gracefully.

The only way we see them working well is when JavaScript is a blocking resource and when you are a 100% sure it will always load successfully.

For async/defered JavaScript the elements will always exist partly as un-upgraded elements. The elements will first behave as native elements before being customized. This will lead to unexpected document states and hard to solve bugs.

This is the main reason we never used this API for client work.
We could have picked a polyfill for Safari but we never saw this feature as viable.

---

This is different from regular custom elements.
Those are not expected to have any behaviour when the JavaScript is slow or fails to load.

[WebReflection]

@romainmenke as one that used builtin extend forever (and wrote all polyfills to date), I am curious around these takes too:

The only way we see them working well is when JavaScript is a blocking resource and when you are a 100% sure it will always load successfully.

The whole point of builtin extends is that these don't need JS by design and the element will do what that element does by standard specifications. This current behavior is pretty off from your conclusion that builtin extends must be successfully loaded and/or as blocking resource. I completely miss your use case that fails here, being that an image, a button, an input, a table, or any other element that would work out of the box as-is, which is the only reason to use builtin extends.

For async/defered JavaScript the elements will always exist partly as un-upgraded elements.

This is true for "dumb elements" too (Custom Elements without builtin extend and without JS driving them) except these literally do nothing and represent nothing until the class that takes them over kicks in. How are these superior for tables, inputs, head elements, even divs, quotes, pre elements, and so on?

The elements will first behave as native elements before being customized.

This is exactly the feature builtin extends bring to the table, so it looks like you are confused around what builtin extends are or what's their application? You can have a body tag, even an html one, that's builtin extend: how anything you say breaks there?

This will lead to race conditions and hard to solve bugs.

This is in contradiction with the statement you made after:

This is the main reason we never used this API.

If you never used this API, how can you write opinions around such API? It'd be great to have more contributors from people that actually understood and used builtin extends in production, first Polymer users or A-Frame users or somebody from Google as they also used these in various products and these days are falling back to ugly home-made solutions like it is for the YouTube case.

[romainmenke]

If you never used this API, how can you write opinions around such API?

Edited my comment.
Obviously this isn't an unmotivated comment.
Haven't used it in production vs. haven't used it at all.

---

My point was that either you want a standard element or you want a custom one.
You never deliberately want a standard element for the first 100ms of a page view and a custom one for the remainder. There is no way this can ever be viewed as a desirable trait.

The first 100ms can easily become the first 5s for users on slower devices with a slow connection.

I have no intention of derailing this thread with a lengthy discussion about this detail. If you do want to discuss this further then I am happy to do so elsewhere.

[WebReflection]

@romainmenke to simplify my answer: please do check any website that use builtin extends with JS disabled (to mimic no JS load at all) now check with the same constraint any site based on custom elements without builtins and see the difference.

Also: race conditions don't exist in JS by definition because JS is single tread since day 0 but if there's anything that cause problems with builtin extends it will cause problems with custom elements too, except, like I've said, these represent nothing until the definition kicks in ... surely can't represent body, html, style, pre, code, button, link, tables, link, script, title, and the list goes on and on (pretty much any void element in the specs + every other).

[WebReflection]

@romainmenke

You never deliberately want a standard element for the first 100ms of a page view and a custom one for the remainder.

I definitively do and these are the benefits:

• I can style the element for everyone in one CSS, instead of needing two styles, one for light-dom and one for SD
• I can be sure that element will always work as meant to do by standard definition
• I don't need JS at all to know my site works, even via curl

The first 100ms can easily become the first 5s for users on slower devices with a slow connection.

Exactly why I prefer builtin extends over non-builtin extends if my purpose is to show a video tag, an img, a table, a body, etc etc

[WebReflection]

I have no intention of derailing this thread with a lengthy discussion about this detail

Me neither, but this discussion is claiming non-real-world facts so it's good to counter-argument these as long as anyone is willing to answer my questions ... to date, I keep asking questions but I rarely receive answers.

Reasons builtin extends, when builtin extends make sense, are superior to me:

• no FOUC. One style and you're good. Speficity is great too, so either the CSS didn't load neither, or the element will look exactly as it did before once the definition kicks in. Whenever the definition lands on the page, nothing happens for users eyes or surfing.
• builtin extends are the literal de-facto definition of graceful enhancement. Anyone running a querySelectorAll on the page, or a MutationObserver, to instruments/enrich regular elements, would be better off with builtin extends (bootstrap to name one case).
• of course a developer can destroy a builtin extend behavior via a badly written custom element, but that's true since jQuery exists (and bootstrap to name one case) and it's also true with custom elements and Shadow DOM.
• accessibility is the best out of the box so I really want to hear the a11y story because that really made me wonder what is it that I am missing. If there was anything inferior, instead of superior, in terms of default a11y I would've never pushed so hard for polyfills and builtin extends, so please anyone elaborate and thank you in advance.
• hydration ... the most difficult and bloated topic in the industry, can happen out of the box with builtin extends. I have libraries published that do that and compete with tools based alternatives (Svelte and friends) plus hydration is extremely hard on JSX world (de-facto standard) and everyone is coming up with one or another bloated solution that builtin extends would gracefully solve without issues.

I also don't want to derail this issue though, so I might just step-aside until I have at least some answer around the questions I've made, thank you!

[romainmenke]

race conditions don't exist in JS by definition because JS is single tread since day 0

yup yup, edited my comment so as not to trigger unwanted associations.
I did not mean a multi-threading race condition where multiple threads are accessing the same memory.

A race condition or race hazard is the condition of an electronics, software, or other system where the system's substantive behavior is dependent on the sequence or timing of other uncontrollable events. It becomes a bug when one or more of the possible behaviors is undesirable.

So by a broader definition race conditions most definitely exist within websites.

---

I have no intention to debate this further here.
Especially not at this intensity.

I know that a lot of people want this feature and that people do not like it that Safari does not support it.

I came here to share one more aspect which makes this feature not ideal. Those concerns are not the result of misunderstanding the feature. It should be ok for me to express these things.

Maybe we are unique in finding that this is an issue and in that case I am sure that my concern won't have any impact on the outcome.