javascript - 删除 StencilJS 中的组件标签

Question

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

something.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>

score 3 · Accepted Answer

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

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

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

1 回答 1