Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove the support for inherting from builtin subclasses of HTMLElement and SVGElement (bugzilla: 28547) #133

Closed
hayatoito opened this issue Jul 6, 2015 · 1 comment · Fixed by #405

Comments

@hayatoito
Copy link
Contributor

Title: Remove the support for inherting from builtin subclasses of HTMLElement and SVGElement (bugzilla: 28547)

Migrated from: https://www.w3.org/Bugs/Public/show_bug.cgi?id=28547


comment: 0
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=28547#c0
Ryosuke Niwa wrote on 2015-04-22 23:54:56 +0000.

See https://wiki.whatwg.org/wiki/Custom_Elements#Subclassing_existing_elements

Subclassing existing elements is hard as implementation-wise identity is both object-based and name / namespace based. Therefore subclassing an existing element (currently) requires that the name / namespace does not change. See also DOM: element constructors.

A hack was invented to make this work: . That hack is not well liked leaving us two options:

We leave this for now and work on this in parallel while stabilizing a smaller subset of custom elements.
We block on this and delay even more.
(Assuming that not all implementers are suddenly going to be okay with this hack.)

However, without this hack accessibility for trivial components is harder as more things have to be done by hand.

Another use case had emerged for the "is" hack: piggy-backing on parser behaviors. For example, extending for data binding or as a way to specify shadow trees in HTML.


comment: 1
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=28547#c1
Martin Naumann wrote on 2015-04-23 10:16:51 +0000.

Please don't kill this.

The fact that it's important to provide accessibility features is one aspect of why this is important and useful.

The other aspect (and that's something that has actually bitten me in a live scenario) is defensiveness and progressive enhancement.

I'd like to give an example of what happened to me, hurt my users and left me feel like an idiot for not using "is" extension.

I wrote a component that wrapped Ace-Editor to provide syntax-highlighted code editing textareas.

However, being not fully aware of the power behind the extension features, I built my component from scratch, using the textarea prototype, so

instead of

<textarea is="code-editor"></textarea>

That worked nice, until I had a shaky mobile connection and the javascript didn't fully load. it left me with an unusable application. unfortunately it was not me finding this first, instead a bunch of people who use the internal tool were left with something that didn't work right when the connection was wonky or some other script had a parsing problem that prevented registration of the component.

I quickly rectified the situation by correctly extending from a textarea, so the old fashioned Form submit action could be edited and POSTed, even when all the lovely enhancements that we are using (relying on Javascript) fail.

Unless provided with a similar, internally less hacky, solution this should not be taken away from Web components.

I think it's a fundamental trait of the web platform to be resilient and making Web components depend on javascript is harmful to this trait.

Arguably we could leave it up to developers to provide those fullbacks outside of Web components, but that's making "doing the right thing" harder, which IMHO isn't a good idea either.


comment: 2
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=28547#c2
Ryosuke Niwa wrote on 2015-04-23 10:30:46 +0000.

The right fallback mechanism for web components is to use compostion as done in video, embed, object, and numerous other HTML elements.

e.g.
<textarea></textarea>


comment: 3
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=28547#c3
Martin Naumann wrote on 2015-04-23 10:43:25 +0000.

(In reply to Ryosuke Niwa from comment #2)

The right fallback mechanism for web components is to use compostion as done
in video, embed, object, and numerous other HTML elements.

e.g.
<textarea></textarea>

Good point and definitely worth considering in this scenario, but it puts additional effort on the author using the component as they would have to always supply this nested element while the is-mechanism works without an additional level of content. At least that's what I feel when seeing this example.

Video, Embed, Object and Canvas provide alternative content in case one type of content isn't available.

The code-editor on the other hand enhances a feature that is a part of the platform, the textarea. I as an author prefer the extension mechanism over the composition.

Plus I am not entirely sure how that works with the accessibility affordances I would have on a browser that does support the component. would I still have to deal with ARIA and all of the things I'm getting "for free" with the extension?


comment: 4
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=28547#c4
Ryosuke Niwa wrote on 2015-05-14 07:39:40 +0000.

(In reply to Martin Naumann from comment #3)

Plus I am not entirely sure how that works with the accessibility
affordances I would have on a browser that does support the component. would
I still have to deal with ARIA and all of the things I'm getting "for free"
with the extension?

A lot of people are making this argument but that's simply not true. UAs can't make subclassed elements more accessible automatically.

@rniwa rniwa added the v1 label Mar 1, 2016
domenic added a commit that referenced this issue Mar 1, 2016
Notable changes:

- Implemented HTMLElement constructor using @rniwa's algorithm from #403.
- Rewrote element upgrading to use @rniwa's algorithm from #403, and incorporated it into the rest of the upgrading considerations.
- Got rid of the ability to extend SVGElement, thus allowing us to remove most mentions of namespaces from the spec.
- Removed createdCallback.
- Rewrote "registering elements":
  - Uses defineElement instead of registerElement
  - Preserves the constructor instead of grabbing the .prototype property and synthesizing a new constructor
  - No longer spread out over four separate algorithms plus registerElement; everything is now inline under defineElement
  - More precise about exactly how to get the custom element prototype and callbacks
- Rewrote createElement and createElementNS to be replacements instead of patches, and to call the author-supplied constructor.
- Removed the "All Algorithms in One Diagram" section since so many algorithms changed or were inlined into their callers.
- Removed the "Custom Elements and ECMAScript 6" section since it is very obsolete and does not reflect our current thinking.
- New and rewritten algorithms do not use the unorthodox INPUTS/OUTPUTS blocks, or capitalized variable names. This is kind of a nice marker of new vs. old content.

Notable things *not* substantially changed:

- Parser changes are not specced still, besides to say that they should construct the element using its constructor.
- Lifecycle callbacks were not changed, except for removing createdCallback.
- Type extensions were not removed (yet?); it seems better to have a modernized version of them that we atomically remove.
- Registries were not made available everywhere.

Closes #403. Closes #365. Closes #283. Closes #185. Closes #170. Closes #169. Closes #167. Closes #163. Closes #162. Closes #161. Closes #158. Clsoes #137 (modulo the fact that #165 is still open). Closes #134. Closes #133.
domenic added a commit that referenced this issue Mar 1, 2016
Notable changes:

- Implemented HTMLElement constructor using @rniwa's algorithm from #403.
- Rewrote element upgrading to use @rniwa's algorithm from #403, and incorporated it into the rest of the upgrading considerations.
- Got rid of the ability to extend SVGElement, thus allowing us to remove most mentions of namespaces from the spec.
- Removed createdCallback.
- Rewrote "registering elements":
  - Uses defineElement instead of registerElement
  - Preserves the constructor instead of grabbing the .prototype property and synthesizing a new constructor
  - No longer spread out over four separate algorithms plus registerElement; everything is now inline under defineElement
  - More precise about exactly how to get the custom element prototype and callbacks
- Rewrote createElement and createElementNS to be replacements instead of patches, and to call the author-supplied constructor.
- Removed the "All Algorithms in One Diagram" section since so many algorithms changed or were inlined into their callers.
- Removed the "Custom Elements and ECMAScript 6" section since it is very obsolete and does not reflect our current thinking.
- New and rewritten algorithms do not use the unorthodox INPUTS/OUTPUTS blocks, or capitalized variable names. This is kind of a nice marker of new vs. old content.

Notable things *not* substantially changed:

- Parser changes are not specced still, besides to say that they should construct the element using its constructor.
- Lifecycle callbacks were not changed, except for removing createdCallback.
- Type extensions were not removed (yet?); it seems better to have a modernized version of them that we atomically remove.
- Registries were not made available everywhere.

Closes #403. Closes #365. Closes #283. Closes #185. Closes #170. Closes #169. Closes #167. Closes #163. Closes #162. Closes #161. Closes #158. Clsoes #137 (modulo the fact that #165 is still open). Closes #134. Closes #133.
domenic added a commit that referenced this issue Mar 1, 2016
Notable changes:

- Implemented HTMLElement constructor using @rniwa's algorithm from #403.
- Rewrote element upgrading to use @rniwa's algorithm from #403, and incorporated it into the rest of the upgrading considerations.
- Got rid of the ability to extend SVGElement, thus allowing us to remove most mentions of namespaces from the spec.
- Removed createdCallback.
- Rewrote "registering elements":
  - Uses defineElement instead of registerElement
  - Preserves the constructor instead of grabbing the .prototype property and synthesizing a new constructor
  - No longer spread out over four separate algorithms plus registerElement; everything is now inline under defineElement
  - More precise about exactly how to get the custom element prototype and callbacks
- Rewrote createElement and createElementNS to be replacements instead of patches, and to call the author-supplied constructor.
- Removed the "All Algorithms in One Diagram" section since so many algorithms changed or were inlined into their callers.
- Removed the "Custom Elements and ECMAScript 6" section since it is very obsolete and does not reflect our current thinking.
- New and rewritten algorithms do not use the unorthodox INPUTS/OUTPUTS blocks, or capitalized variable names. This is kind of a nice marker of new vs. old content.

Notable things *not* substantially changed:

- Parser changes are not specced still, besides to say that they should construct the element using its constructor.
- Lifecycle callbacks were not changed, except for removing createdCallback.
- Type extensions were not removed (yet?); it seems better to have a modernized version of them that we atomically remove.
- Registries were not made available everywhere.

Closes #403. Closes #365. Closes #283. Closes #185. Closes #170. Closes #169. Closes #167. Closes #163. Closes #162. Closes #161. Closes #158. Closes #137 (modulo the fact that #165 is still open). Closes #134. Closes #133.
domenic added a commit that referenced this issue Mar 1, 2016
Notable changes:

- Implemented HTMLElement constructor using @rniwa's algorithm from #403.
- Rewrote element upgrading to use @rniwa's algorithm from #403, and incorporated it into the rest of the upgrading considerations.
- Got rid of the ability to extend SVGElement, thus allowing us to remove most mentions of namespaces from the spec.
- Removed createdCallback.
- Rewrote "registering elements":
  - Uses defineElement instead of registerElement
  - Preserves the constructor instead of grabbing the .prototype property and synthesizing a new constructor
  - No longer spread out over four separate algorithms plus registerElement; everything is now inline under defineElement
  - More precise about exactly how to get the custom element prototype and callbacks
- Rewrote createElement and createElementNS to be replacements instead of patches, and to call the author-supplied constructor.
- Removed the "All Algorithms in One Diagram" section since so many algorithms changed or were inlined into their callers.
- Removed the "Custom Elements and ECMAScript 6" section since it is very obsolete and does not reflect our current thinking.
- New and rewritten algorithms do not use the unorthodox INPUTS/OUTPUTS blocks, or capitalized variable names. This is kind of a nice marker of new vs. old content.

Notable things *not* substantially changed:

- Parser changes are not specced still, besides to say that they should construct the element using its constructor.
- Lifecycle callbacks were not changed, except for removing createdCallback.
- Type extensions were not removed (yet?); it seems better to have a modernized version of them that we atomically remove.
- Registries were not made available everywhere.

Closes #403. Closes #365. Closes #283. Closes #185. Closes #170. Closes #169. Closes #167. Closes #163. Closes #162. Closes #161. Closes #158. Closes #137 (modulo the fact that #165 is still open). Closes #134. Closes #133.
domenic added a commit that referenced this issue Mar 3, 2016
Notable changes:

- Implemented HTMLElement constructor using @rniwa's algorithm from #403.
- Rewrote element upgrading to use @rniwa's algorithm from #403, and incorporated it into the rest of the upgrading considerations.
- Got rid of the ability to extend SVGElement, thus allowing us to remove most mentions of namespaces from the spec.
- Removed createdCallback.
- Rewrote "registering elements":
  - Uses defineElement instead of registerElement
  - Preserves the constructor instead of grabbing the .prototype property and synthesizing a new constructor
  - No longer spread out over four separate algorithms plus registerElement; everything is now inline under defineElement
  - More precise about exactly how to get the custom element prototype and callbacks
- Rewrote createElement and createElementNS to be replacements instead of patches, and to call the author-supplied constructor.
- Removed the "All Algorithms in One Diagram" section since so many algorithms changed or were inlined into their callers.
- Removed the "Custom Elements and ECMAScript 6" section since it is very obsolete and does not reflect our current thinking.
- New and rewritten algorithms do not use the unorthodox INPUTS/OUTPUTS blocks, or capitalized variable names. This is kind of a nice marker of new vs. old content.
- I have taken over as spec editor for custom elements

Notable things *not* substantially changed:

- Parser changes are not specced still, besides to say that they should construct the element using its constructor.
- Lifecycle callbacks were not changed, except for removing createdCallback.
- Type extensions were not removed (yet?); it seems better to have a modernized version of them that we atomically remove.
- Registries were not made available everywhere.

Closes #403. Closes #365. Closes #283. Closes #185. Closes #170. Closes #169. Closes #167. Closes #163. Closes #162. Closes #161. Closes #158. Closes #137 (modulo the fact that #165 is still open). Closes #134. Closes #133.
@nazar-pc
Copy link

A lot of people are making this argument but that's simply not true. UAs can't make subclassed elements more accessible automatically.

@rniwa, more accessible than what? I think it would be definitely more accessible than div. Simple example: input[is=custom-password][type=password] which only differs in modified border.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants