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:
-------------------------------------------
🔗 Browser Native series - https://vtns.io/browser-native
🔗 Link to the HTWOO library - https://lab.n8d.studio/htwoo/
🔗 Microsoft Graph toolkit http://aka.ms/graph-toolkit
🔗 Sample code - https://officedev.github.io/browser-n...
🔗 Lit Components - https://lit.dev


📚 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
https://www.voitanos.io/course-master...
📺 Microsoft 365 Certified Developer Associate MS-600 Exam Prep
https://www.voitanos.io/course-prepar...
✉️ Explore & evaluate the SharePoint Framework
https://www.voitanos.io/ecourse-explo...
✉️ Understand the SharePoint Framework toolchain
https://www.voitanos.io/ecourse-under...


🔗 Links
-------------------------------------------
Site ▶️ https://www.voitanos.io
Twiter ▶️   / andrewconnell  
Facebook ▶️   / voitanos  
LinkedIn ▶️   / andrewconnell  
Instagram ▶️   / voitanos_llc  

#BrowserNative #WebComponents