Web Components

<little-bits>

Dave 👋🏻

Developer Advocate at zeroheight

• darn.es
• zeroheight.com
• linkedin.com/in/daviddarnes
• mastodon.design/@daviddarnes

🍋 → 🥤

🗣️ → 🔊

https://darn.es

https://codepen.io/daviddarnes/pen/dyBGObZ

https://codepen.io/daviddarnes/pen/QWXydbd

Enter…

Web Components

• Custom elements
• Shadow DOM

Web Components is a suite of different technologies allowing you to create reusable custom elements…

https://developer.mozilla.org/en-US/docs/Web/API/Web_components

• HTML templates
• Dedicated CSS selectors

https://zeroheight.com/resources/the-case-for-web-components/

The Case for Web Components 🔌

• What they are
• Why you should consider them
• What makes a Web Component
• Making your first Web Component
• Glossary of experts and resources

https://darn.es/play-button-web-component/

https://youtu.be/oCyXsHC-lQ4​

https://developer.mozilla.org/en-US/docs/Web/CSS/:playing

https://darn.es/is-playing-web-component/

https://youtu.be/fJ9rUzIMcZQ

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#usage_notes

https://darn.es/random-source-web-component/

…OK stop

How does this work?

https://codepen.io/michellebarker/pen/bPEWGK

https://codepen.io/daviddarnes/pen/rNEeaba

https://codepen.io/daviddarnes/pen/jOjqbJa

https://youtu.be/oQuqZDZf1ts​

https://nordhealth.design/

https://nordhealth.design/components/

https://www.provet.cloud

https://darn.es/#contact

https://codepen.io/collection/vBwoLZ

https://slides.com/daviddarnes/web-components-little-bits

Thank you

</little-bits>