WebComponents

Contribute to heybran/web-components-resources development by creating an account on GitHub.

Components are everywhere, but they are rarely reusable across systems. A design system component is written differently than a CMS editor component. But does it have to be this way? Could we take one set of components and port them to multiple JavaScript frameworks, import them into design tools, and use them for the editing…

A web component for sticky-positioned page anchor menus.

NL Design System organiseert dit jaar voor de 3e keer de Design Systems Week. Van 2 tot 5 oktober zijn er dagelijks meerdere korte sessies van diverse organisaties over het hoe en waarom van design systems.

Building React's portal or Vue's teleport without any dependencies.

A followup to my previous proof of concept web component for Reveal.js.

My first time building a (very) simple web component.

The most important questions regarding web component accessibility

Dave Rupert recently made a bit of a stir with his post “If Web Components are so great, why am I not using them?”. I’ve been working with web components for a few years now, so I…

Screen reader and browser support tests for the aria-haspopup attribute.

The era of custom elements SSR is upon us. Let’s take a look at how to spin up a simple Node server and use custom elements as templates in three popular formats, and what this means for the future of web components.

Custom element for importing (parts of) HTML documents into other documents - GitHub - SirPepe/html-import: Custom element for importing (parts of) HTML documents into other documents

Theming the Shadow DOM requires the Light DOM to plug some the holes.

My first time building a (very) simple web component.

Benny Powers, Web Developer

In this talk, we'll discover what web components are, and how PatternFly Elements 2.0 implements a high-fidelity PatternFly experience that's available to developers in any tech stack - Drupal, Java, front-end frameworks (including React), or just plain-old HTML.

Here we are with a new issue of our Web Components' series. It is always a good idea to make a summary of what we have seen so far in order to get acquainted with what this new chapter brings.Up until now we tried to create a solid foundation about what a web component is as well as we have seen a part of its API, s...

In our series of articles about web components, we have first made an introduction into the web components world and looked into how we got to where we are today. Next, we talked about the web components API, more specifically how to define them, their attributes, and props.So far, we know the fundamentals and we're...

Shadow DOM is a kind of retcon for the web. As I’ve written in the past, shadow DOM upends a lot of developer expectations and invalidates many tried-and-true techniques that worked fine in t…

Shadow DOM promises to allow developers to create more maintainable, cross-framework components, but there is an as-yet unsolved conundrum for accessibility.

Marko is a friendly (and fast!) UI library that makes building web apps fun.

A Web Component to turn an array of integers into a fun little chart.

Web component JS frameworks overview by their syntax and features: Svelte, React, Vue 3, SolidJS, Qwik, Angular, Lit, Vue 2, Ember, Alpine, Aurelia 1

For a long time I didn’t know what to do with web components. There wasn’t a lot of writing around them outside of the spec, all the stuff around shadow DOM ...

By wrapping and enhancing HTML elements, we can provide a solid baseline experience, with progressive enhancement as the cherry on top.

A curated collection of Web Components resources

Form-Associated Custom Elements are a new web standard by which to build custom interactive form...

Blank starter project for building ES6 apps.

Learn how to build Web Components with LitElement from Polymer by our expert Patrick Jahr. Including sample code.

A zero dependency vanilla custom element that adds the capability to wrap html so it the inner text can be added to the users clipboard.