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

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 spec本身引用了emotion-😍作为有效的自定义元素名称的示例。

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

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>

Answer 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?

Answer 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 }

<emotion-😍></emotion-😍>