Web Components: A Beginner's Guide to Building Reusable HTML elements

React, Angular, Vue – all the big web frameworks have components that make it easy to reuse parts of a web user interface. But what if you don’t want to limit yourself to just one? What if you want to write a component that will work with today’s web frameworks and the dozen or so that may come out at any time? In this episode of Browser Native, you’ll learn how to build reusable web components using the features built into modern web browsers, so they’ll work everywhere.

📚 Resources:
-------------------------------------------

📚 Chapters
-------------------------------------------
00:00 : Introduction
01:45 : Sample stop-watch component
02:59 : CSS conflict between the component and the page
03:40 : Web component code
09:18 : Naming your web component
11:03 : Using the Shadow DOM to isolate your CSS
14:20 : Musings on web components and the SharePoint Framework
17:09 : Using Lit to build web components

🔖 My on-demand & free email courses
-------------------------------------------
📺  Mastering the SharePoint Framework
📺  Microsoft 365 Certified Developer Associate MS-600 Exam Prep
✉️  Explore & evaluate the SharePoint Framework
✉️  Understand the SharePoint Framework toolchain

🔗 Links
-------------------------------------------

#BrowserNative #WebComponents

[patricknelson]

It’s even more amazing than that (re: shadow root/DOM). Your events are also isolated, so when they bubble up (i.e. “composed” like touch/click) they bubble out of your element but your element itself is the target (not whatever was interacted with _inside_ of your element). However, you can configure that for custom events (i.e. prevent it from bubbling out of your element, which is the default). Even your <form> tags are unaffected by outer/wrapping <form> tags.

One downside I’ve experienced is the inefficiency of having to load/reload custom web fonts, because those are completely isolated and not able to reused inside of the component. The CSS isolation is great, but that extra network overhead isn’t so great.