Question

我正在尝试创建一个扩展div元素的Web组件，我发现this other Stack Overflow question关于如何扩展本机元素（在这种情况下为按钮）。但是，我无法使其工作。而且，根据this answer中的更新，它应该可以工作。

如果您在此简化的代码段中查看结果，它将仅呈现为带有文本的简单内联元素。而且，如果您打开Chrome控制台并查看“属性”标签，那么很显然它不会继承HTMLButtonElement（应该继承）。怎么了？

class FancyButton extends HTMLButtonElement {
    constructor() {
        super(); // always call super() first in the ctor.
        this.addEventListener('click', e => this.innerHTML = "I was clicked");
    }
}

customElements.define('fancy-button', FancyButton, { extends: 'button' });

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <fancy-button>Click me</fancy-button>
  </body>
</html>

Answer 1

AFAIK

有两种类型的自定义元素

自治的自定义元素
定制的内置元素

一个注册表可以将它们全部统治
只有一个注册表，因此您的 Customized元素被注册为fancy-button;
但是不能不能与自治表示法一起使用： <fancy-button></fancy-button/>

从“文档”部分：扩展本机HTML元素：

https://developers.google.com/web/fundamentals/web-components/customelements#extendhtml

自定义内置元素的消费者可以以多种方式使用它。
他们可以通过在本地标签上添加is =“”属性来声明它：

    <!-- This <button> is a fancy button. -->
    <button is="fancy-button" disabled>Fancy button!</button>

在JavaScript中创建实例：

    // Custom elements overload createElement() to support the is="" attribute.
    let button = document.createElement('button', {is: 'fancy-button'});
    button.textContent = 'Fancy button!';
    button.disabled = true;
    document.body.appendChild(button);

或使用新运算符：

    let button = new FancyButton();
    button.textContent = 'Fancy button!';
    button.disabled = true;

结论

有两种类型的自定义元素，您不能混合

您要么去：

自治的自定义元素：<fancy-button></fancy-button>

或

自定义内置元素<button is=fancy-button></button>

用于自定义内置元素

document.createElement('fancy-button') instanceof HTMLButtonElement

返回 false

和

<fancy-button>lightDOM</fancy-button>

document.querySelector('fancy-button')

返回元素（如果在DOM中），
但是该元素被处理为显示lightDOM内容的未定义元素

同时使用两种类型的自定义元素的示例

在https://github.com/card-ts/playingcardts中，我同时使用了两种方法：

<card-t rank=queen suit=hearts></card-t>

<img is=queen-of-hearts/>

因此，我不能这样做：

<queen-of-hearts></queen-of-hearts>

后者的价值很小，对于IMG，is属性可用于CSS定位。
CSS Selector for a partial CustomElement nodename

Web组件：扩展本机元素

1 个答案:

从“文档”部分：扩展本机HTML元素：

结论

用于自定义内置元素

同时使用两种类型的自定义元素的示例