Using Web Components - Styling article

[alangdm]

closes #19

Description

The article for the using web components styling section of the outline. Any feedback on the content/examples would be appreciated.

TBD

• [x] Files: I don't think we had a naming convention for files/folders. I tried to make an educated guess judging from the current content + the outline. Does it look ok?
• [x] Demos: I think we mentioned on the meeting that we should discuss this after a few articles are actually done, but I was thinking of adding mine either through Lit Playground elements or WebComponents.dev. Is there any preference about which to use or how to use it? (i.e. use playground elements through the rocket plugin or having an organization/collection in webcomponents.dev)

[netlify[bot]]

✅ Deploy Preview for web-components-cg ready!

Name	Link
🔨 Latest commit	50c798427688f7ee2e0e39b409882691371e4ab0
🔍 Latest deploy log	https://app.netlify.com/sites/web-components-cg/deploys/628daa3efdb31100082fc5ac
😎 Deploy Preview	https://deploy-preview-22--web-components-cg.netlify.app/articles/using/styling-shadow
📱 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 settings.

[Westbrook]

Looks like you made a good decision on the directory structure: https://deploy-preview-22--web-components-cg.netlify.app/articles/using/styling-shadow/. Do you want to get those "to dos" into this PR, or would it be better to take any high level notes on the content here, merge it in and then follow up on images/demos later?

I like the use of the webcomponents.dev demo, they do some embeds natively, right? Or I think @bennypowers did some MD plugins for similar. If that didn't work, we might look at leveraging features of the SSG we are using, e.g. https://rocket.modern-web.dev/docs/markdown-javascript/preview/, if for nothing else to colocate the demo to the documentation...

[alangdm]

@Westbrook Thanks for checking the PR

As for the demo stuff, webcomponents.dev does have iframe embedding so I tried adding it for at least the last one. It looks pretty good to be honest.

I think using that or one of the plugins Benny made for using playground elements could look pretty good. If we do end up using wc dev I think it might be worth to create an org and one or multiple collections dedicated for the demos.

At any rate, the remaining TODOs I think can stay as they are for the time being until we sort out which option we want to use in a more general sense (I can remove the "comments") to make the article look a little nicer in its current form)

[alangdm]

Some notes from the cg meeting:

• remove todos, no need for too many snippets, bad perf
• add a block quote mentioning how all this is dependent on the component's css API
• the guide on shadow Dom for the creating side should cover the best practices from a component creator perspective

[alangdm]

I've updated the PR with the changes requested 👍