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

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

。。。并在Firefox v.63上获得完美的效果

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

Uncaught SyntaxError: Unexpected end of JSON input

由于

this.innerHTML

返回空字符串

我还尝试了其他DOM方法来访问文本内容，但所有这些方法都失败了

现在我很不明白，如何让它与Chrome一起工作

顺便说一句：使用

没有帮助，因为我不想呈现文本内容。。。仅访问它进行解析

已解决：

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

  ---

您应该等待内容出现

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

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

---

另外，实际上

可以帮助处理

slotchange

事件。如果不需要，可以隐藏呈现或删除内容。

为什么不使其更灵活，并同时支持

src

属性和

数据

属性

MyElement类扩展了HtmleElement{
静态get ObservedAttribute（）{
返回['src']；
}
构造函数（）{
超级（）；
this.attachShadow（{mode:'open'}）；
这是一个数据={
名称：“”，
地址：''
};
}
attributeChangedCallback（属性名称、旧值、新值）{
if（oldVal！==newVal）{
const el=这个；
fetch（newVal）.then（resp=>resp.json（））.then(
数据=>{
el._数据=数据；
el.render（）；
}
);
}
}
render（）{
this.shadowRoot.innerHTML=`
${this.\u data.name}
${this.\u data.address}
`;
}
设置地址（val）{
这是。_data.address=val；
这个。render（）；
}
集合名称（val）{
这是。_data.name=val；
这个。render（）；
}
}
自定义元素。定义（'my-elem'，MyElement）；
设置超时（（）=>{
设el=document.querySelector（'my-elem'）；
el.name=‘小丑’；
el.address='Gothem'；
设置超时（（）=>{
el.setAttribute（'src'，'data:application/json，%7B%22name%22:%22Thanos%22，%22address%22:%22Titan%22%7D'）
}, 1500);
}, 1500);
我想这就是您遇到的问题：
Uncaught SyntaxError: Unexpected end of JSON input

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