#webcomponents (19 links)
- The killer feature of Web Components - daverupert.com daverupert.com
Known as “CEM” to its friends, a CEM is a community standard JSON format that surfaces information about your component APIs. The analyzer scans your class-based component to build up a “manifest” of all the methods, events, slots, parts, tag name, and CSS variables you want to expose. It works on a single component or an entire system’s worth of components.
- Styling Light DOM htmlwithsuperpowers.netlify.app
- Inheritable styles pierce the Shadow DOM | HTML with Superpowers htmlwithsuperpowers.netlify.app
The Shadow DOM behaves like an <iframe> in its encapsulation. The Shadow DOM inherits some of the same quirks in the form of inheritable styles. Inheritable styles are styles that inherit the styles from their parent. Here's a list.
- Web components are okay | Read the Tea Leaves nolanlawson.com
A great hub post for recent thinking about web components.
- A common web component learning blunder daverupert.com
The most common first-time experience I come across is a developer coming from a classical component framework like React with JSX going straight to writing vanilla Web Components, becoming frustrated, and then deeming web components “not ready for primetime.”
- HTML Web Components - Jim Nielsen’s Blog blog.jim-nielsen.com
When you try building web components the same way you build React components, it’s easy to get frustrated and give up because web components don’t work like React components — I know I gave up a few times.
The grain of a React component is not the grain of a web component. Their design prioritize different functionality and forms of use. If you try to use one like the other, you’ll fight the direction of their natural grain.
- Banked: Shipping web components in 2020 banked.com
This actually feels like a very sane use-case for Web Components. Interesting journey from Vanilla JS to raw Web Components to tooling + Web Components.
- All the Ways to Make a Web Component - June 2020 Update webcomponents.dev
- Integrating Stencil with Storybook by Andreas Wissel andreaswissel.com
- javascript - Pros and Cons of Facebook's React vs. Web Components (Polymer) - Programmers Stack Exchange programmers.stackexchange.com
- Web Components punch list paciellogroup.com