javascriptcssweb-componentstenciljsstencil-component

How to prevent CSS from being auto-appended to bottom of the head element

A group of volunteers has created a single/multi-select web component using StencilJS: https://github.com/NothingAG/adg-components

For this web component, Shadow DOM is not enabled so that developers can override/customise styles.

Now we want to hand it over to the client so they can use it in their project. They do it like this:

<script type="module" src="/build/adg-components.esm.js"></script>
<script nomodule src="/build/adg-components.js"></script>

<adg-combobox
  id="hobbies"
  name="hobbies"
  label="Please select your hobbies"
  optionslabel="Hobbies"
  multi="true"
  lang="de"
></adg-combobox>

What they experience though is that because the Shadow DOM is not enabled, the CSS is auto-attached to the very bottom of <head>, after any other styles:

enter image description here

This makes is very hard to override specific styles. Is there a way to prevent that? For example, it would make much more sense in our case that the styles are added right after <script type="module" src="/build/adg-components.esm.js"></script>, so any following <style> would take precedence.

One other workaround I can think of is to remove the styles altogether when running $ npm run build, and then let the client import the styles manually. But this doesn't feel like the right way to do it.

Any help is highly appreciated. Thank you.

Solution

  • When the Shadow DOM is turned off, Stencil attaches the CSS to the head element, before the first link element.

    Here is the relevant line of code that does this: https://github.com/ionic-team/stencil/blob/0cd139b6a0e17c6b0916d8b0fb3e943a523f4a2f/src/runtime/styles.ts#L79

    So all you need to do is have at least one link element in the head and the CSS will be inserted in the correct document order so that you can override the styles.