Weeknote 18/2021
⁃ Notes
Web Components
Are comprised of:
- Custom elements - contain their own semantics, behaviors, markup and can be shared across frameworks and browsers.
- Shadow DOM - an encapsulated version of the DOM. We still have total control over that part of our page, but scoped to a context.
- HTML
<template>element allows us to create re-usable templates of code inside HTML. It won’t be immediately rendered, but can be used later.
Introductions to Web Components
- Using custom elements - Web Components | MDN
- An Introduction to Web Components | CSS-Tricks
- Web Components Are Easier Than You Think
- Crafting Reusable HTML Templates | CSS-Tricks
- Creating a Custom Element from Scratch | CSS-Tricks
- Using Modern Web Components
Courses
Examples
Styling
- How to create a component without using the Shadow DOM? - Stack Overflow
- Thinking Through Styling Options for Web Components | CSS-Tricks
- Pondering the (im)possibilities of styling a web component.