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

【问题标题】：How to create a custom element that contains special characters in its name?如何创建名称中包含特殊字符的自定义元素？
【发布时间】：2020-03-09 21:09:06
【问题描述】：

我有一个在外部库中注册的自定义 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 spec 本身引用 emotion-???? 作为有效自定义元素名称的示例。

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

【问题讨论】：

我无法在您的代码中识别出使用自定义元素的正常方式。如果这有帮助，我最近使用自定义元素发布了回复 -> stackoverflow.com/questions/60573934/…

标签： javascript html unicode custom-element createelement

【解决方案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 }

&lt;div id=box&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

确保您正在使用：

<meta charset="UTF-8">

或者尝试使用这个解决方案：

function emojiUnicode (emoji) {
    var comp;
    if (emoji.length === 1) {
        comp = emoji.charCodeAt(0);
    }
    comp = (
        (emoji.charCodeAt(0) - 0xD800) * 0x400
      + (emoji.charCodeAt(1) - 0xDC00) + 0x10000
    );
    if (comp < 0) {
        comp = emoji.charCodeAt(0);
    }
    return comp.toString("16");
};
emojiUnicode("?"); # result "1f600"

感谢How to convert one emoji character to Unicode codepoint number in JavaScript?

【讨论】：

【解决方案3】：

要完成其他答案，您宁愿使用 new 和 class 名称来创建自定义元素：

document.body.appendChild( new TestElement )

请看下面的例子：

class TestElement extends HTMLElement {
  constructor() {
    super()
    console.log( 'emotion-? created' )
    this.attachShadow( { mode: 'open' } ).innerHTML = 'Hello '
  }
}
customElements.define( 'emotion-?', TestElement )

var elem = new TestElement
elem.classList.add( 'el' )
document.body.appendChild( elem )

.el { color: red }

&lt;emotion-?&gt;&lt;/emotion-?&gt;

【讨论】：