javascript - 如何创建名称中包含特殊字符的自定义元素？

Question

我有一个在外部库中注册的自定义 HTML 元素，其名称包含特殊的 Unicode 字符。我想动态创建这种元素，所以我尝试使用document.createElement，但这样做会导致 Chrome 和 Firefox 出现运行时错误，因为显然元素的名称无效。只有 Safari 允许以这种方式创建元素。

这是一个简化的示例：

// External code
class TestElement extends HTMLElement
{ }
customElements.define("emotion-", TestElement); // OK
console.log("custom element registered");

// My code
document.createElement("emotion-"); // Error in Chrome and Firefox
console.log("custom element created");

请注意，HTML 规范本身引用emotion-了一个有效自定义元素名称的示例。

如何在 JavaScript 中创建这样的自定义元素？

标签： javascripthtmlunicodecustom-elementcreateelement

Answer 1

您可以innerHTML改为document.createElement在 DOM 中创建元素

// External code
class TestElement extends HTMLElement
{ }
customElements.define("emotion-", TestElement); // OK
console.log("custom element registered");

// My code
box.innerHTML = "<emotion- class='el'></emotion->"
console.log("custom element created");

.el { border: 1px solid red }

<div id=box></div>