删除 StencilJS 中的组件标签

Question

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

东西.component.html

<div>
    Hello World
</div>

另一个.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>

Answer 1

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

你可以做什么display: contents在你的组件上使用 CSS 规则display: contents防止它在布局中生成一个框（参见https://caniuse.com/css-display-contents ，仍然有点实验性）。

---

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