home ~ projects ~ socials

Declarative Shadow DOM CSS Encapsulation Test For The Neb RSS Reader

This is another test for isolating the CSS of individual posts for the Neb RSS reader1. It's a follow up to DEPRECATED: Web Component CSS Encapsulation Test For The Neb RSS Reader.

I like this approach since it doesn't require JavaScript. The <style> element can be used directly instead of putting it in a <code> element and migrating it like I was doing in the earlier version.

HTML

<style>
  .post {
    contain: style;
  }
</style>

<div class="post">
  <template shadowrootmode="open">
    <style>
      * { color: crimson; }
    </style>
    <p>This is alfa</p>
  </template>
</div>

<div class="post">
  <template shadowrootmode="open">
    <style>
      * { color: rebeccapurple; }
    </style>
    <p>This is bravo</p>
  </template>
</div>

Output

[This text doesn't matter directly. It's purpose is to ensure that the styles didn't leak out of the example. Things are good as long as it didn't pick up one of the colors.]

Going With It

This feels like a really good approach. I'll be using it for the first version of the app.

-a

-- end of line --

Endnotes

The initial suggestion to go this direction came from the Web Components Community group.

It included adding the style tag at the top with .post { contain: style; }. I looked up the contain docs which say:

The contain CSS property indicates that an element and its contents are, as much as possible, independent from the rest of the document tree.

The template docs say they aren't rendered by default. That makes it seem like the contain: style wouldn't be necessary. I doesn't seem to hurt anything though. I'm leaving it for now.

Speaking of the docs for CSS contain, they aren't clear to me about which of the possible values (e.g. style, layout, size, etc.) to use. I'm going with style which seems like a good choice. It's possible another one would be a better fit. But, again, I'm not seeing issues with the current approach.

References

Footnotes

1 ⤴

Neb being a social network I'm building that's based off websites and RSS instead of custom protocols or centralized domains. I'm just getting started. Updates will be here if you're interested:

Neb - Network Websites as Social Network