删除 StencilJS 中的组件标签

【问题标题】：Remove component tag in StencilJS删除 StencilJS 中的组件标签
【发布时间】：2020-09-24 06:39:31
【问题描述】：

我正在尝试从 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>

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：