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[bot]]

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

Name	Link
🔨 Latest commit	b0330514430b119b1e8e034483c5fe01e80bb81b
🔍 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.