如何使用 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>`;
}

得到我想要的，但是我如何使用 TSX 做到这一点？ （为简单起见，上面的代码非常简单，但我真正需要构建的是更复杂的带有事件等的 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 使元素的子元素看起来好像是元素父元素的直接子元素，忽略元素本身

注意：它在 IE、opera mini 中不起作用...https://caniuse.com/#feat=css-display-contents

UPD：

如果您不使用shadowDOM，则需要将:host 替换为标签名称，例如：

tab-header {
  display: contents;
}

Answer 2

功能组件或许可以帮助您实现这一目标。它们只是返回 TSX 元素的函数的语法糖，因此它们与普通的 Stencil 组件完全不同。主要区别在于它们不编译为 Web 组件，因此只能在 TSX 中工作。但它们也不会产生额外的 DOM 节点，因为它们只是返回函数返回的模板。

让我们举个例子：

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

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

你可以把它写成一个函数式组件：

import { FunctionalComponent } from '@stencil/core';

interface ListItemProps {
  label: string;
}

export const ListItem: FunctionalComponent<ListItemProps> = ({ label }) => (
  <li>{label}</li>
);

然后你就可以像这样使用它了

import { ListItem } from './ListItem';

@Component({ tag: 'my-comp' })
export class MyComp {
  render() {
    return (
      <ul>
        <ListItem label="tab 1" />
        <ListItem label="tab 2" />
      </ul>
    );
  }
}

将呈现为

<ul>
  <li>tab 1</li>
  <li>tab 2</li>
</ul>

---

你也可以编写你的函数组件来代替标签属性来接受标签作为一个孩子：

export const ListItem: FunctionalComponent = (_, children) => (
  <li>{children}</li>
);

并像使用它

<ListItem>tab 1</ListItem>

---

BTW Host 实际上是一个功能组件。要了解有关功能组件的更多信息（以及存在的限制），请参阅https://stenciljs.com/docs/functional-components。