Figure out how to publish a performant custom element

[paulirish]

I need help here, this isn't my area of expertise. ;)

I don't love the idea that JS has to be run in order for the styles to be added to the page.

This thing should still look great if the JS is in a <script async> and delivered really late.

What is the best practice for packaging a web component such that its straightforward for someone to npm install it but with styles built separately from the JS?

[Garbee]

My (naive) guidance in this area is to keep-it-simple since this component is not using Shadow DOM things aren't too complex to leave in a developer's hands.

1. Break the script and style into their own file.
2. Instruct the developers to define the component name that they wish to use. (If you're running a build script compiling things together, you may want one class to a file without any side-effects like defining being done automatically.)
3. Give good instructions on applying the component and what devs need to do.

This should in theory be the simplest distribution method possible and give implementers absolute control where they need it.

I'm working on this during my flight today, expect a PR in the next day or two (and other issues coming in as-needed for work later.)

Update: PR #3 is open for anyone who wants to follow along to see updates as they happen. Once I'm solid on everything to support what I've done the PR description and title will be updated.

[justinfagnani]

@paulirish I have this blog post on how I think web components should be published: http://justinfagnani.com/2019/11/01/how-to-publish-web-components-to-npm/

But I also think that styles should be included in the JS so that they are installed automatically, rather than require any separate style imports, so it's not much help there.

[Garbee]

I think bundling the styles in from the JS directly partially comes down to Shadow DOM usage. If you're using it, then it seems fine since the engine is only applying those styles within that scope anyways. However in this situation, we do not have Shadow DOM in use, so the same styles affect every instance. It makes more sense to bundle the CSS separately and pay the cost once to apply it rather than every time a component is used on a page.

[justinfagnani]

Well... shadow dom should be used to encapsulate the styles to only these elements. Every browser that supports custom elements also supports shadow dom.

[Garbee]

I'm also going back on what I told you at CDS Paul. The current norm in web components is shipping with your module defining itself. Since we are not providing this as an exported module, we should go ahead and define the custom element in the script itself. I'll get that done and clean up what needs to be done tomorrow (or tonight after I get home and nap.)