Q: How to build and use web components?

Stencil
1

I am looking to create multiple web components for users to embed in their websites. The script should ideally be a different .js file for each embedded component to keep downloads minimal.

  • How do I build a separate file for each of the web component?
  • Tutorials show that there are module and nomodule script but I can only locate the .esm.js file.
/dist
  /stencil-component
    /index.esm.js
    /p-11abc1a.js
    /p-11abc1b.entry.js
    /stencil-component.esm.js <-- can be imported via script tag module

Where is the nomodule script?
How do I avoid bundling multiple web components into one namespace?

  • When using the component all three js files are called (p-11abc1a.js, p-11abc1b.entry.js, stencil-component.esm.js). I would like to keep it one file per component.
2

Hey @danmusth :wave:

I’d recommend taking a look at our documentation for the custom-elements output target. It generates a separate file per Stencil component, which sound like what you’re looking for!

As far as nomodule goes, can you point us at the tutorial that’s referencing it? Normally nomodule is an attribute that goes on a script tag (this StackOverflow answer is great at explaining it!). But we’d love to me able to make any tutorials a little clearer if at all possible!