“Web Component DevTools” extension for Chrome DevTools

“Web Component DevTools” is a Chrome Extension for Chrome DevTools that adds support for Web Components / Custom Elements. Web Component DevTools is aimed at all developers working with Web Components. The tooling provided creates a new Chrome Devtools panel, which allows a quick look at the custom elements on the current page, and enables …

Integrate Custom Elements into Forms with ElementInternals

Over at CSS-Tricks, Caleb Williams digs into ElementInternals The ElementInternals standard is a very exciting set of features with a very unassuming name. Among the features internals adds are the ability to participate in forms and an API around accessibility controls. As you can see in the demo below his <rad-input> does exactly that. See …

<tab-container> Custom Element — An Accessible Tab Container Element with Keyboard Support

Built by GitHub is <tab-container>, a Custom Element that defines an accessible tab container element with keyboard support and that also follows the ARIA best practices guide on tabs. Upon importing the package it will register the Custom Element, so you can use it immediately: <tab-container> <div role="tablist"> <button type="button" role="tab" aria-selected="true">Tab one</button> <button type="button" …

Options for styling Web Components

Nolan Lawson, author of emoji-picker-element, a web component you can use to provide an emoji-picker: What wasn’t obvious to me, though, was how to allow users to style it. What if they wanted a different background color? What if they wanted the emoji to be bigger? What if they wanted a different font for the …

The Case for Web Components

With the release of “Edgium”, all major browsers now support Web Components. An effort 9 years in the making, but we’ve finally made it. WebComponents are supported natively in every major browser pic.twitter.com/6yPoTXno27 — Polymer Project (@polymer) January 15, 2020 Perfect time to link to this by Viljami Salminen in which he makes the case …

When in doubt, trust the browser

Presentation by Pieter Beulque, as given at the most recent FronteersBE meetup, in which he builds a Tweet Embed using Web Components’ Custom Elements. As a front-end developer, you’re always confronted with making choices. In this talk I cover the benefits you get for free when considering W3C standards or standard browser API’s instead of …

More performant YouTube embeds with <lite-youtube-embed>

By Paul Irish: Provide videos with a supercharged focus on visual performance. This custom element renders just like the real thing but approximately 224X faster. Installation per NPM: npm install lite-youtube-embed Usage: <!– Include the stylesheet, this could be direct from the package or bundled –> <link rel="stylesheet" href="node_modules/lite-youtube-embed/src/lite-yt-embed.css" /> <!– Include the custom element …

Unicode Patterns with <css-doodle />

<css-doodle /> is a web component for drawing patterns with CSS. The component will generate a grid of divs by the rules (plain CSS) inside it. You can easily manipulate those cells using CSS to come up with a graphic pattern or an animated graph. The limit is the limit of CSS itself. Combine <css-doodle …

Stencil: A Compiler for Web Components

Stencil is a compiler that generates Web Components (more specifically, Custom Elements). Stencil combines the best concepts of the most popular frameworks into a simple build-time tool. Stencil takes features such as Virtual DOM Async rendering (inspired by React Fiber) Reactive data-binding TypeScript JSX and then generates standards-based Web Components with these features baked in. …