Web 组件：扩展原生元素

Question

我正在尝试创建一个扩展 div 元素的 Web 组件，我发现 this other Stack Overflow question about how to extend native elements (a button in this case). However, I cannot make it work. And, according to the update in 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

据我所知

有 2 种自定义元素MDN: Using Custom Elements

自主自定义元素
自定义Built-In个元素
Polyfill 需要 Safari
因为 Apple... 好吧.. 是 Apple.. 并拒绝实施自定义元素

一个注册管理机构统领一切

只有一个注册表，因此您的 自定义元素 被注册为 fancy-button;
但是可以NOT*与自治符号一起使用： <fancy-button></fancy-button/>

* Firefox DOES allow a mix of both notations BUT only if define() is used AFTER element usage

来自文档部分：扩展本机 HTML 元素：

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

自定义 built-in 元素的消费者可以通过多种方式使用它。
他们可以通过在原生标签上添加 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;

    // have to do this yourself!! IF you want to use it as a selector
    button.setAttribute("is","fancy-button");

    document.body.appendChild(button);

或使用新运算符：

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

结论

有 2 种自定义元素，不能混用

你要么选择：

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

或

自定义 Built-In 元素 <button is=fancy-button></button>

用于自定义 Built-In 元素

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

returns 假

和

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

document.querySelector('fancy-button')

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

使用两种自定义元素的示例

在 https://cardmeister.github.io 中我同时使用了：

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

<img is=queen-of-hearts/>

因此我可以不做：

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

后者没有什么价值，对于 IMG，is 属性可用于 CSS 定位。

Web 组件：扩展原生元素

Web Components : extending native elements

javascript

web-component

来自文档部分：扩展本机 HTML 元素：

结论

用于自定义 Built-In 元素

使用两种自定义元素的示例