Introduction

Slots are a powerful feature when working with webcomponents that use the shadowDOM. And thanks to the hook @atomico/hooks/use-slot you will be able to observe the state of the slot and know the childNodes of this to manage the logic of the template. For example:

Thus managing to easily condition parts of our template to define the slots.

Another trick that useSlot allows us is the interaction at the DOM level, example:

We can even apply filters per instance for a better identification of the node, example:

⚠️ In case of high ui computation use prefer to use slot modifiers inside a useEffect.

Slot pattern as a template

Slots are not only limited to a static definition, you can use them to identify a node and use it to create new nodes according to the logic of the webcomponent, example:

Thanks to useSlot(refSlotTemplateUser) we get the first node of the Template slot to be used in the iteration of the results obtained by fetch, with this we have eliminated the leverage of the webcomponent in charge of rendering the user at the level of our webcomponent userFetch

Example

⚠️ the cloneNode property is available from version atomico@1.37.0

Normally we create webcomponents that only work with lightDOM or shadowDOM, example:

function componentWithLightDom() {
  return (
    <host>
      <h1>I am in the lightDOM</h1>
    </host>
  );
}

function componentWithShadowDom() {
  return (
    <host shadowDom>
      <h1>I am inside the shadowDOM</h1>
    </host>
  );
}

With atomico you can go further thanks to the hook @atomico/hooks/use-render which allows you to execute renders independent of the main one, example:

import { useRender } from "@atomico/hooks/use-render";

function componentWithLightDomAndShadowDom() {
  useRender(() => <h1>I am in the lightDOM</h1>);
  return (
    <host shadowDom>
      <h1>I am inside the shadowDOM</h1>
    </host>
  );
}

What are the benefits of using useRender?

1. Encapsulate DOM fragments within custom Hooks and then render to any webcomponent.

2. patch the limitations of webcomponents that use shadowDOM, to improve communication with forms.

Patch the limitations of web components that use shadow DOM, to improve communication with forms

import { css, useProp } from "atomico";
import { useRender } from "@atomico/hooks/use-render";

function componentWithLightDomAndShadowDom(props) {
  const [value, setValue] = useProp("value");

  useRender(() => (
    <input {...props} oninput={({ target }) => setValue(target.value)} />
  ));

  return (
    <host shadowDom>
      <slot />
    </host>
  );
}

componentWithLightDomAndShadowDom.props = {
  type: {
    type: String,
    reflect: true,
    value: "text",
  },
  value: String,
};

componentWithLightDomAndShadowDom.styles = css`
  ::slotted([type="text"]) {
    border: 1px solid black;
  }
  ::slotted([type="checked"]) {
    width: 30px;
    height: 30px;
    border: 1px solid black;
  }
`;

With the useRender(...) fragment we are managing to render an input in the lightDOM, thanks to this we will be able to control said input from inside the webcomponent.

Conclucion

Thanks to useRender you will be able to work together with LightDOM and shadowDOM from the scope of the webcomponent created with Atomico.

The use of slots improves the composition allowing to reflect the content exposed in the lightDOM of the component in the shadowDOM of this, example:

::slotted(<selector>)

The slotted selector allows the manipulation of the content exposed as a lightDOM slot from the shadowDOM, example:

Auto slot

With Atomico you can define a default slot for your components, this is useful if you want to maintain some compositional consistency without the need to declare the use of slot, example:

To define a default slot, you only have to declare slot in the props, example:

Consider this practical only if the composition is leveraged to the container, this does not prevent you from modifying the slot property from the component instance.

Conditional slot