Maple

•    Javascript

---

Maple is a seamless module that allows you to organise your React project in terms of webcomponents — with HTML Imports, Shadow DOM, and Custom Elements — allowing you to implement any Flux architecture you choose, and then compile with Mapleify for production.💎 Install all dependencies and start server using npm start.

webcomponents web-components react react.js custom-elements shadow-boundary shadow-dom html-imports

stencil - A Web Component compiler for building fast, reusable UI components and Progressive Web Apps 💎 Built by the Ionic Framework team

•    TypeScript

---

Stencil is a simple compiler for generating Web Components and progressive web apps (PWA). Stencil was built by the Ionic Framework team for its next generation of performant mobile and desktop Web Components. Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. It takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that runs on both modern browsers and legacy browsers back to Internet Explorer 11.

webcomponents pwa progressive-web-app custom-elements typescript stencil stenciljs ionic web-components components webapp

ui5-webcomponents - UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice

•    Javascript

---

The UI5 Web Components are the new offering of UI5 to provide a set of reusable UI elements to you which can be used for your static web sites or for web application using any web framework of your choice with a minimalistic footprint. They allow you to create a consistent user experience aligned to the SAP Fiori Design Guidelines and incorporate the Fiori 3 design. Web Components are a set of features which allow to enhance the HTML vocabulary with custom HTML elements when the standard HTML elements are not sufficient (for example, a Button with an icon or a DatePicker). The custom HTML elements allow to share those features and qualities in a standard way. The complexity of HTML, CSS and components behavior is encapsulated behind a custom HTML element. The interaction with the custom HTML elements is done using the standard DOM API.

open-source ui5 web-components openui5 sapui5

ReactShadow - :beginner: Utilise Shadow DOM in React with all the benefits of style encapsulation.

•    Javascript

---

Utilise Shadow DOM in React with all the benefits of style encapsulation.

react reactjs shadow-dom webcomponents components style-encapsulation shadow-boundary css-document react-shadow-dom react-shadow-boundary react-template react-webcomponents react-web-components react-encapsulation

riot - Simple and elegant component-based UI library

•    Javascript

---

A React-like user interface micro-library

webcomponents minimal framework client-side view customtags lite elegant simple custom-tags custom-elements web-components virtual-dom shadow-dom polymer react jsx minimalist declarative templating template data-binding mvc model controller riotjs riot.js javascript-framework

webcomponentsjs - A suite of polyfills supporting the HTML Web Components specs

•    HTML

---

Note. For polyfills that work with the older Custom Elements and Shadow DOM v0 specs, see the v0 branch. Note. For polyfills that include HTML Imports, see the v1 branch.

webcomponents web-components polyfill shim

slim.js - Fast & Robust Front-End Micro-framework based on modern standards

•    Javascript

---

Slim.js is a lightning fast library for development of native Web Components and Custom Elements based on modern standards. No black magic involved, no useless dependencies. It uses ES6+DOM native API to boosts up HTML elements with superpowers.

webcomponents data-binding es6 dom lifecycle library slimjs front-end front-end-development framework angular react aurelia html5 html-element vuejs native web components binding

custom-elements - A polyfill for HTML Custom Elements v1

•    Javascript

---

A polyfill for the custom elements v1 spec. API which might trigger custom element reactions in the DOM and HTML specifications are marked with the CEReactions extended attribute.

custom-elements customelements web-components webcomponents polyfill shim

core - The Heart of X-Tag

•    Javascript

---

This is the repository for the core X-Tag library. X-Tag is a Microsoft supported, open source, JavaScript library that wraps the W3C standard Web Components family of APIs to provide a compact, feature-rich interface for rapid component development. While X-Tag offers feature hooks for all Web Component APIs (Custom Elements, Shadow DOM, HTML Templates), it only requires Custom Element support to operate. In the absence of native Custom Element support, X-Tag relies on the same set of polyfills Google's Polymer framework uses.

skatejs - SkateJS is a web component library designed to give you an augmentation of the web component specs focusing on a functional rendering pipeline, clean property / attribute semantics and a small footprint

•    Javascript

---

At its core, Skate is about creating Custom Elements. Skate provides a series of mixin functions that enable you to control what your component can do.Calling withComponent() gives you a Custom Element class constructor, which you can then extend to define your own elements.

web-components reactiveui components custom dom elements web vdom virtual

elix - High-quality, customizable web components for common user interface patterns

•    Javascript

---

Elix is a community-driven collection of high-quality web components for common user interface patterns. Most applications make use of common, general-purpose user interface patterns such lists, menus, dialogs, carousels, and so on. Such patterns can be efficiently implemented and packaged as web components. Their modular nature lets you easily incorporate web components into your web application, and their standard definition ensures good results across browsers.

webcomponents web-components user-interface calendar combo-box custom-elements carousel dialog drawer dropdown list-box menu overlay popup pull-to-refresh slideshow tabs toast

document-register-element - A stand-alone working lightweight version of the W3C Custom Elements specification

•    Javascript

---

A stand-alone lightweight version of Custom Elements V1 based on top, and compatible with, the battle-tested Custom Elements V0, already used in production with projects such Google AMP HTML ⚡ and others. If you specify noBuiltIn property as true, the V1 API will be polyfilled where needed, but no extra checks and patches will be applied to make custom elements built-in working, since no browser is currently shipping this part of the specification.

polyfill customelements custom element v1 v0 web components elements dom w3c polymer alternative

vaadin-core - An evolving set of free, open source web components for building mobile and desktop web applications in modern browsers

•    HTML

---

Vaadin core components is the open source part of the Vaadin standards-based Web Components set, which contains high-quality user interface components commonly needed in modern mobile and desktop business web applications. For more information, see the Vaadin components README.

web-components polymer polymer-element vaadin vaadin-elements webcomponents collection polymer2 core elements web components

ReactiveElements - Allows to use React.js component as HTML element (web component)

•    Javascript

---

Original children of a custom element is injected to component as this.props.children. In this case this.props.children is equal to "Hello world".

reactjs webcomponents react web-components custom-elements

etch - Builds components using a simple and explicit API around virtual-dom

•    Javascript

---

Etch is a library for writing HTML-based user interface components that provides the convenience of a virtual DOM, while at the same time striving to be minimal, interoperable, and explicit. Etch can be used anywhere, but it was specifically designed with Atom packages and Electron applications in mind.Note that using an Etch component does not require a reference to the Etch library. Etch is an implementation detail, and from the outside the component is just an ordinary object with a simple interface and an .element property. You can also take a more declarative approach by embedding Etch components directly within other Etch components, which we'll cover later in this document.

virtual-dom components virtual-dom-dom-view-element-custom-elements-dom-diff-atom-electron

vaadin-grid - vaadin-grid is a free, high quality data grid / data table Web Component

•    HTML

---

<vaadin-grid> is a free, high quality data grid / data table Web Component, part of the Vaadin components. The Vaadin components are distributed as Bower and npm packages. Please note that the version range is the same, as the API has not changed. You should not mix Bower and npm versions in the same application, though.

vaadin-grid polymer data-grid data-table webcomponents polymer-element web-component vaadin elements components web-components grid datagrid datatable

wired-elements - Collection of elements that appear hand drawn. Great for wireframes.

•    Javascript

---

Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun hand-drawn look. The elements are drawn with enough randomness that no two renderings will be exactly the same - just like two separate hand drawn shapes.

webcomponents lit-element wireframes wireframe web-components lit-html prototyping webcomponent web-component rough sketchy hand-drawn

marksy - A markdown to custom VDOM components library

•    Javascript

---

A markdown to custom components library. Supports any virtual DOM library. This will be converted to the component above. You can pass in any kind of props, as if it was normal code. If you are not familiar with h, this is a convention for creating elements and components in virtual dom implementations.

convert markdown react

expense-manager-demo - Progressive Web App (PWA) demo using Vaadin components

•    HTML

---

This is an example project for how you can build a Progressive Web Application with Polymer and Vaadin components. The application uses a Service Worker to cache the Application Shell. A Web App Manifest file ensures that the browser identifies our app as a Progressive Web Application and offers the user to install the application through an install banner.

pwa pwa-example pwa-boilerplate vaadin-components vaadin polymer

html-as-custom-elements - HTML as Custom Elements

•    CSS

---

A demo is available, which shows implementation efforts for a number of fairly simple elements, and outlines the missing platform features each of them highlights. Even these simple elements have highlighted one major area of missing functionality in custom elements, which has been written up in the document "Gap Analysis: Accessibility". One of the axioms of the extensible web project is that high-level, declarative APIs should be able to be explained in terms of lower-level, imperative APIs. Not just lower-level algorithms, but APIs: the capabilities that we encapsulate inside a given HTML element should also be exposed directly to JavaScript authors. And those APIs should be factored into small, composable pieces, that build on each other to eventually produce the declarative edifice that is HTML. In this way, authors can reuse these platform capabilities without jumping through hoops (like instantiating a HTMLAnchorElement just to parse a URL) or rebuilding large parts of the platform for themselves (like creating their own scrolling logic just to get pull-to-refresh behavior).

html custom-elements web-components