使用 javascript 更新自定义元素阴影 DOM 中的插槽文本

Question

感谢question here，我可以在我的自定义元素中选择一个插槽的文本。

我想知道用 javascript 更新插槽文本的正确方法是什么？

这行得通吗？

this.shadowRoot.querySelector('slot').assignedNodes()[0].innerHTML = 'New text';

还是这个

 this.shadowRoot.querySelector('slot').assignedNodes()[0]. textContent = 'New text';

我什至应该直接使用组件内的 JS 更新插槽内容，还是有一些宗教规则规定插槽应始终仅由主机填充？

Answer 1

只要您的元素内容只是文本，这两种解决方案都可以正常工作并且大部分是等效的。

然而，第二个更擅长处理一些特殊的、特定于 HTML 的字符，例如 < 或 >。

div.textContent = 'to<to'

<div id=div></div>