Mijn vraag:
Is het mogelijk om met een enkele definitie:
zowel autonomous custom elements (<foo-bar>) als customized built-in elements (<a is="foo-bar">) te kunnen declareren in HTML?
Hieronder probeer ik dit te doen, maar voor de `<foo-bar>` declaratie krijg ik een error op lijn 13:
Door de `extends HTMLAnchorElement` zou ik nochtans verwachten dat dit gewoon werkt.
Of ik zou verwachten dat er in `connectedCallback()` een manier is om te bepalen van welke vorm de declaratie is? Dan zou ik in het geval van `<foo-bar>` zelf een `document.createElement('a')` kunnen doen om het anchor element toe te voegen aan de shadow DOM.
Relevante software en hardware die ik gebruik:
Firefox
Wat ik al gevonden of geprobeerd heb:
De MDN documentatie over custom elements:
https://developer.mozilla...nts/Using_custom_elements
Daarin staan voorbeelden van zowel "autonomous custom elements" als "customized built-in elements", maar niet van een enkele definitie waarmee je beide kan gebruiken.
Is het mogelijk om met een enkele definitie:
code:
1
| window.customElements.define('foo-bar', ...); |
zowel autonomous custom elements (<foo-bar>) als customized built-in elements (<a is="foo-bar">) te kunnen declareren in HTML?
Hieronder probeer ik dit te doen, maar voor de `<foo-bar>` declaratie krijg ik een error op lijn 13:
code:
1
| Uncaught TypeError: 'set hash' called on an object that does not implement interface HTMLAnchorElement. |
Door de `extends HTMLAnchorElement` zou ik nochtans verwachten dat dit gewoon werkt.
Of ik zou verwachten dat er in `connectedCallback()` een manier is om te bepalen van welke vorm de declaratie is? Dan zou ik in het geval van `<foo-bar>` zelf een `document.createElement('a')` kunnen doen om het anchor element toe te voegen aan de shadow DOM.
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html>
<a is="foo-bar" href="https://tweakers.net"></a>
<foo-bar href="https://tweakers.net"></foo-bar>
<script>
class Bar extends HTMLAnchorElement {
constructor() {
super();
}
connectedCallback() {
this.hash = '#bar';
if (!this.textContent) {
this.textContent = 'bla';
}
}
}
window.customElements.define('foo-bar', Bar, { extends: 'a' });
</script> |
Relevante software en hardware die ik gebruik:
Firefox
Wat ik al gevonden of geprobeerd heb:
De MDN documentatie over custom elements:
https://developer.mozilla...nts/Using_custom_elements
Daarin staan voorbeelden van zowel "autonomous custom elements" als "customized built-in elements", maar niet van een enkele definitie waarmee je beide kan gebruiken.
[ Voor 0% gewijzigd door terje7601 op 06-02-2024 13:54 . Reden: typo ]