HTML Web Components

[thescientist13]

Related Issue

#14 / #7

Just a demo based on the concept of HTML Web Components

• https://blog.jim-nielsen.com/2023/html-web-components/
• https://adactio.com/journal/20618
• https://meyerweb.com/eric/thoughts/2023/11/01/blinded-by-the-light-dom/

Summary of Changes

Where in some cases, especially in content heavy sites, it might be nicer to "transclude" content through nesting, rather than through attributes. This kind of mixes up the styling paradigm a bit, assuming we're going with something like #11 , but something worth considering at least.

As attributes

<app-card
  imageUrl="https://www.greenwoodjs.io/assets/greenwood-logo-og.png"
  caption="This is the caption"
></app-card>

As HTML content

<app-card>
  <img src="https://www.greenwoodjs.io/assets/greenwood-logo-og.png" height="200px" width="200px"/>
  <p>This is the caption</p>
</app-card>

---

This concept more or less exists because the concept <slot> based content only exists in the context of using Shadow DOM, which for a content heavy site, operating in the light DOM is more desirable (and opens up more opportunities for shared styling and no JavaScript required)

[netlify]

✅ Deploy Preview for super-tapioca-5987ce ready!

Name	Link
🔨 Latest commit	b033051
🔍 Latest deploy log	https://app.netlify.com/sites/super-tapioca-5987ce/deploys/6612c2fda8d8e200085146cb
😎 Deploy Preview	https://deploy-preview-22--super-tapioca-5987ce.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[thescientist13]

This pattern was explored implemented as part of #33 / #94 and will become part of the next WCC release and should land unpatched in #107