Yes, but Atomico doesn't only depend on ESM, it also depends on the following api's that you will have to cover with Polyfill or some bundle tool.

1. ESM modules: documentation - caniuse

2. CustomElements: documentation - caniuse

3. ShadowRoot: documentation - caniuse

4. Map: documentation - caniuse

5. Symbol and Symbol.for: documentation - caniuse

6. append and prepend: documentation - caniuse

7. Declarative Shadow DOM: Only for using SSR with webcomponents that use shadowDOM. documentation

Let's understand that today Atomico covers 94% of existing browsers without the need for polyfills or packers, the 6% not covered are usually browsers like ie11 or others.

If you depend on the uncovered segment of browsers you can use the following tools to support the apis necessary for Atomico to work.

polyfill-fastly.io to associate Map, Symbol, append and prepend.

https://github.com/Rich-Harris/shimport to associate esm.

https://github.com/ungap/custom-elements to associate customElements apis.

When to use the shadow Dom?

By creating a UI solution that coexists in the web ecosystem such as HTML, libraries and frameworks, since the shadowDOM allows you to:

1. Protect your UI from libraries like React, Vue and others

2. Associate styles natively, efficiently and safely

3. Reference lightDOM content in the shadowDOM

Webcomponents with Shadow DOM are ideal for creating cross UI solutions as they coexist without conflict with the entire web ecosystem.

Why use shadowDOM?

To protect our component at the DOM manipulation level and take advantage of some of the benefits of the shadowDOM such as:

1. Slot management

2. CSS appearance of web component.

3. The shadowDOM is ideal for creating components that interact with libraries like React, Vue or others. The ShadowDOM protects the DOM it contains from manipulations generated by other libraries.

Slot management

Slots allow us to reflect existing nodes in the lightDOM into the shadowDOM, example:

This is really useful, since we can group slots according to their name in a specific place of the webcomponent.

We invite you to learn more about slots through the following guide:

CSS appearance of web component.

The shadowDOM allows you to do something fantastic, protect your CSS from global styles, this has 2 great advantages:

1. The appearance of our component will not be affected by global CSS declarations.

2. Customization protected by CSS custom Properties

We invite you to learn more about handling styles in atomic through the following guide:

Atomico makes it easy to declare events at the type level using the Host type.

Example

import { Host, c, useEvent } from "atomico";

type CustomDetail = { timestamp: number };

const MyComponent = c(
  (): Host<{ onMyCustomEvent: CustomEvent<CustomDetail> }> => {
    const dispatch = useEvent<CustomDetail>("MyCustomEvent");
    return (
      <host>
        <button
          onclick={() => {
            dispatch({ timestamp: Date.now() });
          }}
        >Click</button>
      </host>
    );
  }
);

In the previous code, we have declared the onMyCustomEvent event at the type level. According to the template logic, this event will be dispatched every time the button is clicked, and the detail attached to this event will be of type CustomDetail.

1. Its name cannot have the on prefix since, if it does, Atomico will recognize it as a property expecting to listen to the event.

2. It can only have one listener, limiting others from observing the event.

We recommend:

1. Using the useEvent hook to dispatch component-level events or any custom hook.

2. Using the Prop.event API to dispatch events when the observed prop changes.

Always prefer the two previously mentioned methods, as they allow you to:

1. Define if the event bubbles.

2. Define if the event is cancelable.

3. Define if the bubbling event can penetrate the shadow DOM.

4. Define a custom constructor for the event.

5. Having multiple listeners for the event

When is it recommended to use a callback as a prop?

Cuando se busca comunicar parametros o leer el retorno de este, ejemplo:

const MyForm = c(
  ({ getPosts }) => {
    const posts = useAsync(getPosts, []);

    return <host></host>;
  },
  {
    props: {
      getPosts: {
        type: Function,
        value: async (): Promise<{ id: number; title: string }[]> => [],
      },
    },
  }
);