is="" 属性是一种通过自定义元素为内置元素提供额外智能的方法，但它似乎只有在自定义元素的 JS 实现扩展了内置元素时才有效在您正在使用它的元素中。
在我看来，将附加功能定义为自定义元素然后将其应用于任何 内置元素会非常有用。这将允许 Web 组件的用户从增强的行为中受益，同时保留标准语义元素的含义。
这个限制的原因是什么？
Firefox 似乎确实允许对内置元素 ( https://codepen.io/bdhowe/pen/QRLrWQ?editors=1010 ) 进行 is="" 升级，但我尝试过的其他浏览器不允许，而且 MDN文档说它只能在自定义元素“扩展它所应用的元素类型”时使用。
class MyElement extends HTMLElement {
constructor() {
super();
var shadow = this.attachShadow({mode: 'open'});
const span = document.createElement('span');
span.textContent = "Hello, world!";
shadow.appendChild(span);
}
}
customElements.define('my-elem', MyElement);
/* I want this to render "Hello, world!" twice. */
<div is="my-elem"></div>
<my-elem></my-elem>
引用:
最佳答案
有两种使用自定义元素定义的方法，您观察到的是两者之间的区别。
如果你想将自定义元素用作自己的元素，例如
<my-elem></my-elem>
然后你需要使用extends HTMLElement。这就是目前“Hello, World!”的结果。以你的例子为例。
如果你想要自定义元素与 is=""一起使用，例如
<div is="my-elem"></div>
然后你需要使用 extends HTMLDivElement 以及在定义中指定 customElements.define('my-elem', MyElement, {extends: 'div'});
这是两种不同的使用方法，不要混用。我会假设他们不能混合的原因是因为同时工作需要多重继承并且不受支持。
尽管可能会很不雅观，但还是可以将某些东西拼凑在一起。最佳做法是使用其中之一。
关于javascript - 为什么 `is` 属性仅适用于覆盖内置元素的 Web 组件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56013003/