Use slots in a Jadis component

In Jadis, much similar to how it works in web components, you can use slots in your templates, so as to create more flexible components.

Usage

It is very simple: you use a slot tag in the template where you want to populate with content from elsewhere, like from another component. The content between both opening and closing tags of your external component will be rendered inside the <slot></slot> tags.

javascript

// MyComponent.js with a slot
export class MyComponent extends Jadis {
  static selector = createSelector('my-component');

  templateHtml() { 
    return html`<div class="container"><slot></slot></div>`; 
  } 

  templateCss() {
    return css`
      .container {
        background-color: darkblue;
        color: white;
      }
    `;
  }
}

MyComponent.register();

typescript

// MyComponent.ts with a slot
export class MyComponent extends Jadis {
  static readonly selector = 'my-component';

  templateHtml(): DocumentFragment { 
    return html`<div class="container"><slot></slot></div>`; 
  } 

  templateCss(): string {
    return css`
      .container {
        background-color: darkblue;
        color: white;
      }
    `;
  }
}

MyComponent.register();

Populate the slot

javascript

// MainPage.js using MyComponent
class MainPage extends Jadis {
  static selector = createSelector('main-page');

  templateHtml() { 
    return html` <my-component><h1>My Title</h1><p>Hello there</p></my-component>`; 
  } 
}

MainPage.register();

typescript

// MainPage.ts using MyComponent
class MainPage extends Jadis {
  static readonly selector = 'main-page';

  templateHtml(): DocumentFragment { 
    return html`<my-component><h1>My Title</h1><p>Hello there</p></my-component>`; 
  } 
}

MainPage.register();

The <h1> and the <p> elements will be rendered through the MainPage component using the MyComponent component.

Named slots

If you need to use several slots in the same component, just name them!

javascript

// MyComponent.js with 2 slots
templateHtml() {
  return html`
    <div class='container'>
        <slot></slot>
        <slot name='article'></slot>
    </div>
  `
}

// Using MyComponent in MainPage.js
templateHtml() {
  return html`
    <my-component>
      <h1>My Title</h1>
      <p>Hello there</p>
      <div slot='article'>
        My article content is good.
      </div>
    </my-component>
  `
}

typescript

// MyComponent.ts with 2 slots
templateHtml(): DocumentFragment {
  return html`
    <div class='container'>
      <slot></slot>
      <slot name='article'></slot>
    </div>
  `
}

// Using MyComponent in MainPage.ts
templateHtml(): DocumentFragment {
    return html`
      <my-component>
        <h1>My Title</h1>
        <p>Hello there</p>
        <div slot='article'>
          My article content is good.
        </div>
      </my-component>
    `;
  }

Even easier With toTemplate()

See the dedicated documentation about the Jadis method toTemplate() which allows you to easily populate slots in the template by passing directly your document fragment as a child of the component, along with attributes and props.

Example with toTemplate()

javascript

// Using MyComponent in MainPage.js
class MainPage extends Jadis {
  static selector = createSelector('main-page');

  templateHtml() {
    return html`
      ${MyComponent.toTemplate(
        {},
        html`<h1>My Article Title</h1>
          <p slot='article'>My article content</p>`
      )}
    `;
  }
}

MainPage.register();

// MyComponent.js definition with slots
export class MyComponent extends Jadis {
  static selector = createSelector('my-component');

  templateHtml() {
    return html`
      <div class='container'>
        <slot></slot>
        <slot name='article'></slot>
      </div>
    `;
  }
}

MyComponent.register();

typescript

// Using MyComponent in MainPage.ts
class MainPage extends Jadis {
  static readonly selector = 'main-page';

  templateHtml(): DocumentFragment {
    return html`
      ${MyComponent.toTemplate(
        {},
        html`<h1>My Article Title</h1>
          <p slot='article'>My article content</p>`
      )}
    `;
  }
}

MainPage.register();

// MyComponent.ts definition with slots
export class MyComponent extends Jadis {
  static readonly selector = 'my-component';

  templateHtml(): DocumentFragment {
    return html`
      <div class='container'>
        <slot></slot>
        <slot name='article'></slot>
      </div>
    `;
  }
}

MyComponent.register();