1

After carefully reading all related articles and posts on many sites, there is still one remaining question: Can i have a single, exchangeable CSS for a web app built with web components widhtout having to deal with all the weird stuff suggested by W3C?

I know about ::part( something ) and exportparts="something" to access nested components, but that does not go down the tree, so I have to add a part attribute to almost every element, which totally bloats my HTML.

Having an @import rule in each component is also not a great option, because it would be one more HTTP request per stylesheet. Also, once loaded in a template, the importet css can not be exchanged easily.

W3C really makes our lives harder by removing /deep/ and ::shadow. I know, performance concerns, blah, blah, but at least that worked like a charm.

Possible solutions I find impractical:

Example HTML where all nested elements would be styleable with global CSS:

<body>
  <o-app>
    #shadowDOM
      <o-header exportparts="username:o-textinput__username,action-ok:o-action__action-ok,o-action__label" part="o-header">
        #shadowDOM
          <o-texinput part="username">
          <o-action exportparts="label:o-action__label" part="action-ok">
            #shadowDOM
              <div part="label">

Then I can finally style the label div by selecting it with:

::part( o-action__label ) {}

Now tell me that having to specify every single part of all descendant elements in the parent elements is not a total mess!

Playaround on Codepen: https://codepen.io/5180/pen/jOyQNYq?editors=1111

fips
  • 81
  • 1
  • 7
  • 1
    In the works; not supported by all browsers yet: *adopted/constructable/constructed* StyleSheets https://github.com/WICG/construct-stylesheets/blob/gh-pages/explainer.md – Danny '365CSI' Engelman Apr 20 '21 at 12:04
  • And the W3C isn't in control any longer; since 2019 they only give the final approval and the WHATWG (Mozilla, Apple, Google, Microsoft) is in the lead: https://techxplore.com/news/2019-06-w3c-whatwg-agreement-version-html.html .. No time to dig, but there must be some info around on Apple have objections to Constructable Stylesheets.. I think Rich Harris tweeted about it. – Danny '365CSI' Engelman Apr 20 '21 at 12:07
  • Thanks for the info! I've already read about that, but what about performance in this case, since this solution again looks very slow? Imagine a page with 100 custom elements. If I want to replace the **theme**, for every element there has to be a request for its stylesheet. – fips Apr 20 '21 at 12:29
  • I don't know your use-case. "Themes" in my components are mainly driven by **--** CSSProperties see: https://flagmeister.github.io/#CSSproperties – Danny '365CSI' Engelman Apr 20 '21 at 12:42
  • 1
    But the biggest Think-Different is to **not** think in StyleSheets; when I started to do WCs seriously I dropped Bootstrap, Tailwind and the lot. A Component should style (based on 'outside' info) itself. If you have hundreds of components and you run into styling problems, maybe its better to **NOT use shadowDOM**. – Danny '365CSI' Engelman Apr 20 '21 at 12:47
  • @Danny'365CSI'Engelman I totally agree! Since the used components are only my own, I could also just ditch web components altogether, but building pages the declarative way is much more beautiful and maintainable. Also I'm not the only one who will build them. The only reason I think in style sheets is, because it's a requirement for me to have support for themes that can be exchanged easily, preferably without a page reload – which can easily be done with a single or just a few top level CSS files. Looks like i can't avoid the "exportparts desaster". – fips Apr 20 '21 at 14:25
  • Custom properties would be the perfect fit if I would just have a light and dark theme. – fips Apr 20 '21 at 14:26
  • 1
    ??? _ditch web components altogether ... declarative way_ ??? You can create pretty cool web components **without** shadowDOM, I wrote [a Dev.to post](https://dev.to/dannyengelman/what-web-technologies-are-required-to-draw-a-pie-chart-in-2021-spoiler-alert-a-standard-web-component-will-do-1j56) that does not use shadowDOM – Danny '365CSI' Engelman Apr 20 '21 at 15:19
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/231377/discussion-between-fips-and-danny-365csi-engelman). – fips Apr 20 '21 at 15:40

1 Answers1

0

Now in 2021 I would rather use light DOM only instead of forcing the shadow DOM to behave like its counterpart, because there is currently no easy method of piercing through the artificial boundary. It was in the spec – ::shadow and /deep/ – but got removed, so deal with it. ::theme() is not ready yet, The ::part() selector is useless for deep styling as I pointed out in my example.

Just use the light DOM (innerHTML) of your custom element to avoid deep styling/theming issues.

fips
  • 81
  • 1
  • 7