A rather geeky/technical weblog, est. 2001, by Bramus
“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 …
Continue reading ““Web Component DevTools” extension for Chrome DevTools”
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 …
Continue reading “Integrate Custom Elements into Forms with ElementInternals“
<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" …
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 …
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 …
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 …
<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 …
Continue reading “More performant YouTube embeds with <lite-youtube-embed>“
<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 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. …
Inspired upon a v0 implementation, I’ve recreated a Markdown renderer in Custom Elements v1. The result is <custom-markdown>. The code itself is pretty straightforward: other than some (contained) styling the custom element uses showdown to convert the Markdown to HTML. This conversion is triggered in the connectedCallback(). class Markdown extends HTMLElement { constructor() { super(); …
Continue reading “Rendering Markdown using Custom Elements v1”