宜搭自定义页面中如何正确引入外部HTML组件？

上官姗姗提问于 2026-02-26 16:20:23 阅读 84

框架

我在宜搭的自定义页面里想嵌入一段外部HTML结构，但直接贴进去样式全乱了，而且有些标签好像被过滤掉了。试过用iframe也不行，加载特别慢还跨域报错。

这是我想插入的代码：

<div class="card-wrapper">
  <h3>用户信息</h3>
  <p id="user-name">张三</p>
  <button onclick="updateInfo()">刷新</button>
</div>

宜搭是不是对自定义HTML有限制？有没有推荐的写法或者必须用它的组件API？

我来解答赞 6 收藏

反馈

2 条解答

UP主～小青 Lv1

宜搭确实会过滤HTML和JS，试试用他们的window.CustomElementAPI来封装你的组件。这样写：

class MyCard extends HTMLElement {

  connectedCallback() {

    this.innerHTML = 

      <div class="card-wrapper">

        <h3>用户信息</h3>

        <p id="user-name">张三</p>

        <button onclick="updateInfo()">刷新</button>

      </div>

    ;

  }

}

window.customElements.define('my-card', MyCard);

然后在宜搭页面里直接用<my-card></my-card>调用。样式问题加个scoped CSS就行，宜搭文档里有例子。

2026-03-05 18:19

伊可 Dev Lv1

宜搭对自定义HTML确实有严格限制，它会自动过滤掉