javascript - 如何获取插槽的文本内容？

Question

我们可以使用 slot 的 stencilJS 元素，如下所示

<my-component>123</my-component>

我正在尝试从我的 render 方法本身获取 123 的值，想知道这是否可能？

@Component({ tag: 'my-component' })
export class MyComponent {
  render() {
    return (
      <div><slot /></div>
    )
  }
}

我想在 123 上做一些字符串格式化，而不是直接渲染 slot

Answer 1

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

@Component({ tag: 'my-component' })
export class MyComponent {
  /**
   * Reference to host element
   */
  @Element() host: HTMLElement;

  componentWillRender() {
    console.log(this.host.innerHTML)
  }
  
  render() {
    return (
      <div><slot /></div>
    )
  }
}