Javascript xhtml与html5原生web组件行为_Javascript_Html_Xhtml_Native Web Component

Javascript xhtml与html5原生web组件行为

javascript html

Javascript xhtml与html5原生web组件行为,javascript,html,xhtml,native-web-component,Javascript,Html,Xhtml,Native Web Component,我有完全相同的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, initi

我有完全相同的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>

然后我得到了

你好世界

。我在FF和Chrome上都得到了完全相同的行为，所以它看起来像预期的那样工作-这是在哪里记录的

这是因为浏览器DOMs API不再是html5 DOM而成为XML DOM，这意味着不再可能分配给

innerHTML

，并且需要使用

DOMParser

等工具？

这与XML解析器的工作方式有关。XML解析器将

..

标记解析为一个元素，而不像HTML解析器那样解析为文本，因此

元素及其内容决不是.innerHTML的字符串输入的一部分

如果您将JavaScript提取到一个外部文件，并引用该文件，那么它可以正常工作，因为JavaScript不会被传递给HTML/XML解析器

另外，你可以逃避<代码>。我认为这对开发者来说是个很好的问题，实际上我用这个来调试另一个问题，从来没有考虑过它会被当作标记。所以我的调试代码中出现了一个bug。。。对于任何其他环境，浏览器JS的编写时间是非JS代码的5倍！

this.shadowRoot.innerHTML = `hello world`;

<!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 = `&lt;p>hello world&lt;/p>`;
    }
}
customElements.define('hello-world', HelloWorld)
</script>
</body>
</html>