我正在尝试创建一个扩展div元素的Web组件，我发现了另一个关于如何扩展本机元素的堆栈溢出问题(在这种情况下是一个按钮)。但是，我无法使其工作。而且，根据此答案中的更新，它应该有效。
如果您查看此简化代码片段中的结果，它只是呈现为带有文本的简单内联元素。 如果您打开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>AFAIK
有 2 种类型的自定义元素 MDN：使用自定义元素
- 自治自定义元素
- Safari 需要定制的内置元素
Polyfill，
因为苹果...井。。是苹果..并拒绝实施定制元素
一个注册表来统治所有
只有一个注册表，因此您的自定义元素注册为fancy-button;
但不能*与自治符号一起使用：<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
自定义内置元素的使用者可以通过多种方式使用它。
他们可以通过在本机标记上添加 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);
或使用 new 运算符：
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
返回假
和
<fancy-button>lightDOM</fancy-button>
document.querySelector('fancy-button')
返回元素(如果在 DOM 中)，
但该元素被处理为显示 lightDOM 内容的未定义元素
使用两种类型的自定义元素的示例
在 https://cardmeister.github.io 中，我同时使用了：
<card-t rank=queen suit=hearts></card-t>
<img is=queen-of-hearts/>
因此我不能做：
<queen-of-hearts></queen-of-hearts>
后者没有什么价值，使用 IMGis属性可用于 CSS 定位。
部分自定义元素节点名称的 CSS 选择器