如何访问 HTML 自定义元素中的内容文本？

Question

当使用用户嵌入的 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 文档中所有自定义元素实例的后面。

Answer 1

您应该等待内容出现。

在大多数情况下，简单的延迟就可以解决问题：

connectedCallback() {
    setTimeout( () => JSON.parse(this.innerHTML) )
}

或者，实际上<slot>可以为该slotchange活动提供帮助。如果您不需要，可以隐藏渲染或删除内容。