swe*_*let 9 javascript web-component
我正在尝试创建一个扩展 div 元素的 Web 组件，我发现了另一个关于如何扩展本机元素（在本例中为按钮）的Stack Overflow 问题。但是，我无法让它发挥作用。而且，根据此答案中的更新，它应该可以工作。
如果您查看此简化代码片段中的结果，它只是呈现为带有文本的简单内联元素。如果您打开 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>Dan*_*man 10
AFAIK
有 2 种类型的自定义元素MDN：使用自定义元素
一个注册管理所有这些
只有一个注册表，因此您的自定义元素注册为fancy-button;
但可以不*与使用自主符号： <fancy-button></fancy-button/>
* Firefox DOES allow a mix of both notations BUT only if define() is used AFTER element usage
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);
或使用新运算符：
let button = new FancyButton();
button.textContent = 'Fancy button!';
button.disabled = true;
有 2 种类型的自定义元素，您不能混合使用
你要么去：
<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 定位。
部分 CustomElement 节点名的 CSS 选择器
| 归档时间： |
|
| 查看次数： |
2698 次 |
| 最近记录： |