riot - Simple and elegant component-based UI library

---

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

Trix - A rich text editor for everyday writing

---

Trix is a WYSIWYG editor for writing messages, comments, articles, and lists—the simple documents most web apps are made of. It features a sophisticated document model, support for embedded attachments, and outputs terse and consistent HTML.

rich-text-editor wysiwyg-editor wysiwyg coffeescript custom-elements rich-text editor html-editor

Maple

---

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

awesome-polymer - A collection of awesome Polymer resources.

---

A collection of awesome Polymer resources.

polymer webcomponents awesome-list custom-elements awesome list shadowdom polymer-resources polymer-element polymer-apps

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

---

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

Standalone - Create framework agnostic components that are truly reusable and interoperable with all the benefits of the React ecosystem – using the HTML5 custom elements API to extend HTML's vocabulary

---

Create framework agnostic components that are truly reusable and interoperable with all the benefits of the React ecosystem – using the HTML5 custom elements API to extend HTML's vocabulary.

react reactjs webcomponents components custom-elements standalone web-components custom-element custom html5 register-element custom-element-api component

Switzerland - 🇨🇭 Switzerland takes a functional approach to Web Components by applying middleware to your components

---

Switzerland takes a functional approach to Web Components by applying middleware to your components. Supports Redux, mobx, attribute mutations, CSS variables, React-esque setState/state, etc… out-of-the-box, along with Shadow DOM for style encapsulation and Custom Elements for interoperability.

webcomponents virtual-dom shadow-dom functional immutable css-variables custom-elements web-components components

vue-element - register a custom element with Vue.js.

---

register a custom element with Vue.js.

vue custom-elements

auto-check-element - An input element that validates its value with a server endpoint.

---

An input element that validates its value against a server endpoint. Provide a URL and a CSRF token and the autocheck component will show validation confirmations and validation errors.

web-components custom-elements custom-element web-component auto-check input

auto-complete-element - Auto-complete input values from server search results.

---

Auto-complete input values from server search results. Distributed under the MIT license. See LICENSE for details.

web-components custom-elements auto-complete

details-dialog-element - A modal dialog that's opened with a <details> button.

---

A modal dialog that's opened with a <details> button. Distributed under the MIT license. See LICENSE for details.

web-components custom-elements dialog details

tao_on_rails - The Missing Front-end Framework for Rails Project

---

Ruby on Rails lacks a recommended way to structure your frontend code in large project for many years. Tao on Rails is the framework to fill the gap which will modularize your page with the new Custom Elements v1 API. See tao.zhiren.com for tutorials and API reference.

rails custom-elements front-end tao custome-elements

clipboard-copy-element - Copy element text content or input values to the clipboard.

---

Copy element text content or input values to the clipboard. After copying to the clipboard, a copy event is dispatched that can be used to notify the user with confirmation, like a tooltip or button highlight.

web-components custom-elements clipboard

shaf-chart - Custom element that upgrades table to a chart

---

Custom element that upgrades table to a chart

chart custom-elements custom element web-components

shaf-toggle - Elegant, accessible toggle element. Upgrades existing <input type="checkbox" />

---

Elegant, accessible toggle element. The prettiest checkbox you ever did see.

custom-elements toggle custom element input checkbox web-components

excise - a react-like toolkit for web components

---

Or give it a try using this JSBin in Chrome. you'll need a browser that supports custom elements v1 and shadow dom v1. chrome 55 will work.

diffhtml custom-elements shadow-dom react

helix-ui - Helix UI Toolkit (Rackspace-only web component library)

---

Helix UI Toolkit (Rackspace-only web component library)

custom-elements shadow-dom ui-toolkit v1

custom-elements - All about HTML Custom Elements

---

Custom Elements is a W3C "working draft" specification that provides a mechanism for defining new behaviors (such as dynamic content or interactivity) for HTML elements with custom names. Custom elements are just HTML elements, with all of the methods and properties of other, built-in elements. The only real constraint* is that their names must contain at least one hyphen (-).

html web-components custom-elements

infamous - Create CSS3D/WebGL applications declaratively with HTML

---

Create 3D CSS+WebGL apps declaratively with HTML. Infamous gives you general-purpose Custom HTML Elements that the browser understands, for defining 2D or 3D scenes rendered with CSS3D, WebGL, or both mixed together.

graphics graphics-engine graphics-programming three-d three-dimensions scene custom-elements ui threejs dom-webgl write-3d-scenes webgl css3d html 3d 3d-graphics 3d-models 3d-engine web-components infamous gui graphical-user-interface interface interface-library user-interface widgets ui-widgets components interface-components ui-components app-components layout rendertree render-tree scenegraph scene-graph browser-interface interactive interaction animation 3d-animation browser clientside client-side html5 touch touch-interface responsive mobile famous famo.us web web-development webdev three.js three-js customelements custom-element customelement webvr webxr webcomponents webcomponent web-component

bondo - A nano framework for Web Components utilizing Virtual-DOM

---

Just a little glue between Custom Elements and Virtual-DOM. Then use it like you would any other HTML element.

web-components virtual-dom custom-elements webcomponents customelements components vdom