HOW TO WRITE COMPONENTS THAT WORK IN ANY FRAMEWORK

Summary from the TLDR Web Dev newsletter

Web Components that work in any framework consist of three key technologies: Custom Elements, Shadow DOM, and HTML Templates. Custom Elements allow you to define your own custom HTML elements that can be reused across your site and even published for use by other developers. Shadow DOM provides encapsulation, ensuring that the styles and behavior of your custom elements are not affected by global styles. HTML Templates allow you to create reusable templates for rendering content within your web components. While building web components can involve some boilerplate code, there are tools like Lit that simplify the process, making it more streamlined and ergonomic.