如何正确动态修改Stencil组件的innerHTML内容？

方法1：手动操作light DOM子节点（推荐） #

不要直接赋值innerHTML，通过添加/移除子节点的方式更新内容，确保组件的slot能感知到变化：

const accordionItem = document.getElementById('myaccordionitem');

// 清空现有内容
accordionItem.replaceChildren();

// 添加纯文本内容
accordionItem.textContent = 'new content';

// 或者添加HTML结构内容
const newContent = document.createElement('div');
newContent.innerHTML = '<strong>全新的HTML内容</strong>';
accordionItem.appendChild(newContent);

这种方式会规范更新组件的light DOM，触发slotchange事件，让组件shadow DOM中的slot同步更新内容。

方法2：使用innerHTML后强制触发slotchange（应急方案） #

如果必须用innerHTML，可以手动创建并触发slotchange事件，让组件感知内容变化：

const accordionItem = document.getElementById('myaccordionitem');
accordionItem.innerHTML = 'new content';

// 找到shadow DOM中的slot元素并触发事件
const slot = accordionItem.shadowRoot?.querySelector('slot');
if (slot) {
  const slotChangeEvent = new Event('slotchange', { bubbles: true, composed: true });
  slot.dispatchEvent(slotChangeEvent);
}

注意这种方法依赖组件的shadow DOM结构（必须存在<slot>元素），兼容性不如方法1。

为什么直接赋值innerHTML无效？ #

直接给自定义元素设置innerHTML时，浏览器会将内容插入light DOM，但部分基于Stencil等框架构建的组件，对innerHTML的直接赋值监听不敏感，或者slotchange事件的触发时机与手动操作子节点不同，导致组件未同步更新shadow DOM内容。而通过replaceChildren()、appendChild()等方法修改子节点，会更规范地触发DOM变动相关事件，包括slotchange。

内容的提问来源于stack exchange，提问作者happy_story