删除 StencilJS 中的组件标签

Question

I'm trying to remove the called component tag from HTML to prevent some broken CSS from external libraries and just show the inner content.

something.component.html

<div>
    Hello World
</div>

another.component.html

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

Then outputs:

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

And I want:

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

Answer 1

This is not possible due to the nature of web components which Stencil outputs.

What you could do instead: use the CSS rule display: contents on your component which prevents it from generating a box in the layout (see https://caniuse.com/css-display-contents , still somewhat experimental).

---

There are also functional components in Stencil ( https://stenciljs.com/docs/functional-components ) which don't generate a parent element, but those are only available within JSX, so you'll always need at least one parent Stencil component (so that you can render some JSX).