dom - 如何使用 TSX 使 StencilJS 组件在没有组件标记的情况下呈现？

Question

虽然我知道这可能是一种糟糕的做法，但我需要构建 StencilJS 组件，以便在 render() 内部，由于已经存在的样式指南，我不想渲染组件标签本身，并且它希望以某种方式构建 DOM。这是我想要实现的 - 组件代码(来自 HTML 或在另一个组件中):

<tab-header-list>
  <tab-header label="tab 1"></tab-header>
  <tab-header label="tab 2"></tab-header>
</tab-header-list>

渲染时，我希望生成的 DOM 类似于:

<tab-header-list>
  <ul>
    <li>tab 1</li>
    <li>tab 2</li>
  </ul>
</tab-header-list>

所以在 tab-header-list render() 函数里面，我在做

return (
  <ul>
    <slot/>
  </ul>
);

我可以在 tab-header render() 函数中执行此操作

@Element() el: HTMLElement;
@Prop() label: string;

render() {
  this.el.outerHTML = `<li>${this.label}</li>`;
}

得到我想要的东西，但我怎么能用 做到这一点多伦多证券交易所 ? (为简单起见，上面的代码非常简单，但我真正需要构建的是更复杂的带有事件等的 li 标签，所以我想使用 TSX)
试图将 DOM 存储到变量，但我不确定如何将其分配为 this.el (outerHTML 似乎是我能想到的唯一方法，但我觉得必须有更好的方法)

@Element() el: HTMLElement;
@Prop() label: string;

render() {
  var tabheaderDOM = (<li>{this.label}</li>);

  // how can I assign above DOM to this.el somehow?
  //this.el.outerHTML = ?
}

我很感激我能得到的任何帮助 - 提前感谢您的时间!

Answer 1

不幸的是，您不能在没有标签的情况下使用自定义元素，但有一个解决方法:
您可以使用 Host元素作为对结果标签的引用。

render () {
  return (
    <Host>....</Host>
  )
}

然后在你的样式表中你可以设置 display它的属性:

:host {
  display: contents;
}

display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself

注意:它在 IE、opera mini 中不起作用... https://caniuse.com/#feat=css-display-contents
更新:
如果您没有使用 shadowDOM那么你需要更换 :host通过标签名称，如:

tab-header {
  display: contents;
}