xhtml 与 html5 本机 Web 组件行为

编程问答 2022-05-27

问题描述

我有完全相同的 html:

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  <title>Document</title>
</head>
<body>
<hello-world></hello-world>
<script>
class HelloWorld extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({mode: 'open'});
    }
    connectedCallback() {
      this.shadowRoot.innerHTML = `<p>hello world</p>`;
    }
}
customElements.define('hello-world',HelloWorld)
</script>
</body>
</html>

如果文件作为 Content-Type text/html; charset=UTF-8 提供，这在 FF 和 Chrome 中都可以正常工作。如果它作为 Content-Type application/xhtml+xml 提供，那么它们都是空的。无论是否使用 shadowDom，我似乎都会得到相同的行为。

如果我有

this.shadowRoot.innerHTML = `hello world`;

然后我得到 hello world。我在 FF 和 Chrome 上得到完全相同的行为，所以看起来它按预期工作 - 记录在哪里？

是不是因为浏览器的 DOM API 不再是 html5 DOM 而是 XML DOM，这意味着无法再分配给 innerHTML，并且需要使用诸如 DOMParser 等工具？ ?

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptnative-web-componentxhtml