我有完全相同的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等工具?
这与XML解析器的工作方式有关。<p>...</p>标记被XML解析器解析为元素，而不是像HTML解析器那样解析为文本，因此p元素及其内容永远不会成为. innerhtml字符串输入的一部分。
如果您将JavaScript提取到外部文件，并引用它，那么它就可以正常工作，因为JavaScript不会被交给HTML/XML解析器。
也可以转义<字符。所以
<!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>
相反的兼容性适用。它将在application/xhtml+xml内容类型中按预期工作，但将把标记解释为text/html内容类型中的文本。
如果您确实需要双语言行为和HTML文件中的所有内容，可以使用"到行尾注释的CDATA hack"。例如
<!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>
//<![CDATA[
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>然而，双语言HTML真的不再是一件事了。选择你喜欢的内容类型。