StencilJS如何更新组件外非Stencil管理的DOM并实现JSX转HTML字符串

方案1：使用Stencil内置render方法直接渲染（优先推荐） #

Stencil的@stencil/core包提供了公开的render方法，支持将JSX直接渲染到任意指定的DOM节点上，无需转换为HTML字符串，还能自动处理diff更新、事件绑定、自定义组件生命周期，是最贴合需求的实现方式。

使用示例：

import { Component, Prop, h, render } from '@stencil/core';

@Component({
  tag: 'your-custom-component',
  shadow: true
})
export class YourCustomComponent {
  // 传入目标div的id
  @Prop() targetDiv: string;

  // 组件加载完成后首次渲染目标内容
  componentDidLoad() {
    this.syncToTargetDiv();
  }

  // 组件状态/属性更新后同步更新目标内容
  componentDidUpdate() {
    this.syncToTargetDiv();
  }

  private syncToTargetDiv() {
    const targetNode = document.getElementById(this.targetDiv);
    if (!targetNode) return;
    // 直接将JSX渲染到目标节点，Stencil会自动处理更新逻辑
    render(this.renderDivContents(), targetNode);
  }

  private renderDivContents() {
    // 此处可正常写任意JSX逻辑，包含嵌套Stencil组件、事件绑定都可正常运行
    return <p>Some JSX stuff</p>
  }

  render() {
    // 此处正常返回组件本身的DOM结构即可
    return <div>组件自身内容</div>
  }
}

方案2：JSX转HTML字符串（仅适合纯静态内容场景） #

如果你确实需要拿到JSX对应的HTML字符串，可以先把JSX渲染到临时内存节点，再提取innerHTML：

private async getJsxHtmlString(jsxContent: any): Promise<string> {
  const tempContainer = document.createElement('div');
  await render(jsxContent, tempContainer);
  return tempContainer.innerHTML;
}

// 调用示例
private async syncToTargetDiv() {
  const targetNode = document.getElementById(this.targetDiv);
  if (!targetNode) return;
  const htmlStr = await this.getJsxHtmlString(this.renderDivContents());
  targetNode.innerHTML = htmlStr;
}

注意：该方案会丢失JSX中绑定的事件、自定义Stencil组件也无法正常运行生命周期，仅适合纯静态内容场景，非必要不推荐使用。

内容的提问来源于stack exchange，提问作者Frédéric Choquet