将元素升级为自定义元素

Question

我正在尝试将普通元素升级为自定义元素。这个例子不起作用，所以也许这是不可能的？

customElements.define('html-h1-heading-element', class extends HTMLHeadingElement {
  constructor() {
    super();
  }
  connectedCallback() {
    console.log('Hello from custom element');
  }
}, {
  extends: 'h1'
});

const el = document.querySelector('h1');
el.setAttribute('is', 'html-h1-heading-element');
console.log(el);

<h1>Hello, world</h1>

Answer 1

有 3 种类型的元素：

标准元素
自主自定义元素（从 HTMLElement 扩展）
自定义内置元素（从标准元素扩展）
is 属性不是您的常规元素属性。
你不能在定义后 change/setAttribute("is",...) 元素到其他东西。
is 属性在元素由 DOM 解析器创建时使用，而不是在 DOM 突变上使用。

Safari不支持自定义元素，Apple 已声明它们永远不会。

来源：https://github.com/WICG/webcomponents/issues/509

你可以试试Polyfill,
或者只是不使用它们，并坚持使用自治元素（扩展 HTMLElement）。

请注意，所有基类，Lit、Hybrids、Stencil 等，都从 HTMLElement 扩展而来，
他们不做定制的内置元素

如果您继续使用自定义元素（不适用于 Safari），请注意：

document.body.append(
  document.createElement("IMG", { is: "white-queen" })
);

正确创建自定义内置DOM元素，
但它 没有设置 DOM 元素的 is 属性。
所以如果你需要它作为 CSS select 或者你必须自己明确设置它。

document.body.appendChild(
  document.createElement("IMG", { is: "white-queen" })
).setAttribute("is", "white-queen");

这就允许 CSS select 或 [is=*"white"] 到 select 全白棋子。 partial 标签名称是不可能的。

我所有的实验都在：https://chessmeister.github.io/

从那以后我就再也没有使用过自定义内置元素。

将元素升级为自定义元素

Upgrade an element to a custom element

javascript

custom-element