小编stf*_*stf的帖子

当使用用户嵌入的 JSON 字符串创建 HTML 自定义元素时（尽管字符串的类型与此处不相关）...

<my-elem>
  { "some":"content" }
</my-elem>

我想要JSON.parse这样...

class MyElement extends HTMLElement {
    constructor() {
        super();
        this.root = this.attachShadow({ mode:'open' });
        this.root.appendChild(template.content.cloneNode(true));
    }
    connectedCallback() {
        JSON.parse(this.innerHTML);
    }
}
customElements.define('my-elem', MyElement);

const template = document.createElement('template');
template.innerHTML =  `irrelevant`;

...并使用 Firefox v.63 获得完美结果。

但是用 Chrome v.71 运行这个我得到

Uncaught SyntaxError: Unexpected end of JSON input

由于this.innerHTML返回空字符串。

我还尝试了其他 DOM 方法来访问文本内容，但也都失败了。

现在我对如何让它与 Chrome 一起工作一无所知。

顺便说一句：使用<slot>没有任何帮助，因为我不想渲染文本内容......只能访问它进行解析。

解决：

• 将模板定义放在类定义之前。
• 确保将定义自定义元素的脚本插入到 HTML 文档中所有自定义元素实例的后面。