在StencilJS中删除组件标签

问题描述

我正在尝试从HTML中删除被调用的组件标签，以防止外部库中的CSS损坏，而只显示内部内容。

something.component.html

<div>
    Hello World
</div>

another.component.html

<div>
   <app-something [config]="somethingConfig"></app-something>
</div>

然后输出：

 <div>
    <app-something>
      <div>
          Hello World
      </div>
    </app-something>
</div>

我想

<div>
  <div>
     Hello World
  </div>
</div>

解决方法

由于Stencil输出的Web组件的性质，这是不可能的。

您可以做的是：在组件上使用CSS规则display: contents，以防止其在布局中生成框（请参见https://caniuse.com/css-display-contents，但仍处于实验阶段）。

---

Stencil（https://stenciljs.com/docs/functional-components）中还有一些功能组件不会生成父元素，但是这些功能组件仅在JSX中可用，因此您将始终需要至少一个父Stencil组件（以便您可以渲染一些JSX）。