将元素升级为自定义元素答案

【问题标题】：Upgrade an element to a custom element将元素升级为自定义元素
【发布时间】：2021-11-05 19:00:57
【问题描述】：

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

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);

&lt;h1&gt;Hello, world&lt;/h1&gt;

【问题讨论】：

好的，你想做什么？将页面上的现有元素动态更改为自定义元素？现在您已经展示了an XY problem，因为is 并不是唯一决定它是哪种元素的东西。并且 JS 中对象的类型不是由它们的属性决定的——如果你有一个对象并为其添加属性使其匹配class Foo，则该对象不会动态更改为Foo 的实例。
@VLAZ 我有一个自定义元素扩展了h1。添加is 属性是您通常执行此操作的方式。我不想在代码中手动添加它，而是使用 javascript 添加它。你对我想要做什么有更清楚的了解吗？
你可以做的是获取h1的内容，用这个内容创建你的自定义html-h1-heading-element。然后用你的新元素替换h1。
然后使用replaceWith（IE11不支持）
我认为我们无法使用脚本将普通元素升级为自定义元素。但如果我们在 html 中设置硬编码的<h1 is="html-h1-heading-element">Hello, world</h1>，它确实有效。检查：mdn.github.io/web-components-examples/word-count-web-component

标签： javascript custom-element

【解决方案1】：

元素有 3 种类型：

标准元素
自治自定义元素（从 HTMLElement 扩展）
自定义内置元素（从标准元素扩展）
is 属性不是您的常规元素属性。
您不能在定义后将元素更改/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 选择器，你必须自己显式设置它。

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

这将允许 CSS 选择器[is=*"white"] 选择所有白色块。 partial 标签名称是不可能的。

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

从那以后我再也没有使用过定制的内置元素。

【讨论】：