CSS selectors based on root element not working. about zero-md HOT 3 CLOSED

Hi, sorry for the late reply.

The underlying tech in zero-md is web components, so in the example you provided, the styles from outside the shadowRoot will not pierce within. (It's a feature not bug 🤣 )

I guess in your use case, you are looking to merge custom styles into the default (provided) styles. There are ways to do it - but all not particularly elegant. I will look at improving that in the next release.

In the meantime, you could try:

<style>
#menu ul {
    margin: 0;
    padding: 0;
}
#menu li {
    display: inline;
    padding: 0;
    margin: 0;
}
</style>
<!-- Add the `no-shadow` attribute -->
<zero-md id="menu" src="index.md" no-shadow></zero-md>

This renders the markdown into light dom instead, so your custom styles will take effect.

from zero-md.

Thank you very much for the reply.
I didn't know it was an intentional feature to not let styles "pierce within". 😅

I guess in your use case, you are looking to merge custom styles into the default (provided) styles. There are ways to do it - but all not particularly elegant. I will look at improving that in the next release.

That sounds great, I think it is important let users override/remove all CSS, but also merge their styles. Perhaps a merge-css-urls attribute would suffice to "build upon" the global css-urls instead of replacing them.

I'm specifying the default css-urls in addition to my custom CSS stylesheet, but I will try the no-shadow attribute.

Keep up the great work!

from zero-md.

V2 is released (finally) with built-in support that may help with your use-case.

From your first post #34 (comment) - with V2 your code may look something like this:

<zero-md src="index.md">
  <template data-merge="append">
    <style>
      ul {
        margin: 0;
        padding: 0;
      }
      li {
        display: inline;
        padding: 0;
        margin: 0;
      }
    </style>
  </template>
</zero-md>

Closing this for now; feel free to re-open if something's wrong! 🎉

from zero-md.