如何使用名称中没有连字符的自定义元素？

Question

我有一个 XML 文件并想将其插入 HTML。 XML中有<book>个标签，所以我想定义一个自定义元素<book>。

但是，名称中似乎需要一个连字符 (-)...

我不想在 XML 文件中写 <my-book> 这样的标签。

有办法吗？

Answer 1

自定义元素必须包含连字符。

但是没有什么可以阻止您在 XML 中使用 <book> 符号，然后客户端将所有这些 未知标签 解析为其他内容。但是你会得到一个FOUC

<my-book-elements>
  <book id="The World according to Garp" />
  <book id="The war of the worlds" />
  <book id="Around the world in eighty days" /> 
  Bye Bye World
</my-book-elements>

<script>
  customElements.define('my-book-elements', class extends HTMLElement {
    connectedCallback() {
      setTimeout(() => { // make sure we can work with the inner DOM nodes
        this.append(...[...this.querySelectorAll("*")].map(node => {
          let book = document.createElement("my-" + node.localName);
          book.id = node.id;
          //node.remove();// not required, innerHTML will replace everything
          return book;
        }));
      });
    }
  });
  customElements.define("my-book", class extends HTMLElement {
    connectedCallback() {
      this.innerHTML = `<div>${this.id}</div>`;
    }
  });
</script>

如何使用名称中没有连字符的自定义元素？

How to use custom elements without hyphen in their name?

html

web-component

custom-element