How to get text content of slot?

Question

We can have stencilJS element with slot as below

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

I'm trying to get the value of 123 from my render method itself, wondering if that is possible?

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

I would like to do some string formatting on 123 instead of rendering slot directly

An alternative would be to have it as a property instead. – Thomas Oct 14 '20 at 13:39 — Thomas, Oct 14 '20 at 13:39
@Thomas: Yup of course, but that would not be ideal – Isaac Oct 15 '20 at 01:25 — Isaac, Oct 15 '20 at 01:25

score 2 · Answer 1 · answered Oct 14 '20 at 12:37

2

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>
    )
  }
}

answered Oct 14 '20 at 12:37

Jakub Zavazal

60
7

It's useless, because `slot` will still be rendered isnt it – Isaac Oct 14 '20 at 13:19
I don't understand what you are trying to do here then, why do you use slot when you don't want it rendered? – Jakub Zavazal Oct 15 '20 at 13:05
I want to use `slot` so that developer can define like a button `123`, but instead of showing 123 directly, I would like to have some formatting and to render 123.00 instead – Isaac Oct 15 '20 at 23:56

score 2 · Answer 2 · edited Dec 28 '20 at 04:38

In web components, the content inside of it is part of the main DOM, too. This content is not going to show if you don't use slots; but, the content is going to project next to the #shadow-root anyway (check it using the chrome developer tools in the "elements" section).

So, if you do not want to show the content using default slots, you can use the property decorator @Element() and declare a property of type HTMLElement:

Then, you can access to the content via innerHTML or innerText.

Finally, you can format the content. Check the code snippet bellow:

import { Component, Element, h } from "@stencil/core";
@Component({
    tag: 'my-component',
    styleUrl: 'my-component.css',
    shadow: true
})

export class MyComponent {
    @Element() element: HTMLElement;

    formatContent(content: any) {
        if ( isNaN(content)){
            // Your format here
            return content;
        } else {
            return content + '.00';
        }
    }
    render() {
        return [
            // Commented slot tag
            // <slot></slot>,
            <div> {this.formatContent(this.element.innerHTML)} </div>
        ];
    }
}

Using three times the web component with 2 strings and a number as a entry data, the result should be:

My text
My text 2
123.00

How to get text content of slot?

2 Answers2