Как создать пользовательский элемент, содержащий в своем имени специальные символы? - PullRequest
Новая
       18

Как создать пользовательский элемент, содержащий в своем имени специальные символы?

2 голосов
/ 10 марта 2020

У меня есть пользовательский элемент 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 spe c сама приводит emotion-? в качестве примера действительного имени настраиваемого элемента.

Как я могу создать такой пользовательский элемент в JavaScript?

Ответы [ 3 ]

1 голос
/ 10 марта 2020

Вы можете использовать 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>
0 голосов
/ 10 марта 2020

Чтобы завершить другой ответ, вам лучше использовать 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-?>
0 голосов
/ 10 марта 2020

Убедитесь, что вы используете: 

<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"

Благодаря Как преобразовать один символ Emoji в номер кодовой точки Unicode в JavaScript?

...