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

  •        6003

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.

https://github.com/WebReflection/document-register-element

Dependencies:

lightercollective : ^0.0.0

Tags
Implementation
License
Platform

   




Related Projects

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.

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.

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.

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.

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.


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.

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).

ajax-form - HTML forms on performance-enhancing drugs

  •    Javascript

HTML forms on performance-enhancing drugs. Note: Ajax-form is not tied to Polymer. In fact, it has no dependencies at all, but should work just fine with Polymer or any other custom elements library. If you prefer to use a simple custom elements polyfill, ajax-form is also your best choice.

iron-list - Element for a virtual, "infinite" list

  •    Javascript

iron-list displays a virtual, 'infinite' list. The template inside the iron-list element represents the DOM to create for each list item. The items property specifies an array of list item data. For performance reasons, not every item in the list is rendered at once; instead a small subset of actual template elements (enough to fill the viewport) are rendered and reused as the user scrolls. As such, it is important that all state of the list template be bound to the model driving it, since the view may be reused with a new model at any time. Particularly, any state that may change as the result of a user interaction with the list item must be bound to the model to avoid view state inconsistency.

generator-polymer - Scaffold out a Polymer project

  •    Javascript

Polymer is a library of polyfills and sugar which enable the use of Web Components in modern browsers. The project allows developers to build apps using the platform of tomorrow and inform the W3C of places where in-flight specifications can be further improved.generator-polymer provides Polymer scaffolding using Yeoman (a scaffolding tool for the web), letting you easily create and customize Polymer (custom) elements via the command-line and import them using HTML Imports. This saves you time writing boilerplate code so you can start writing up the logic to your components straight away.

Angular-Polymer - Angular 2 support for Polymer elements

  •    Typescript

angular-polymer is a directive factory that aims at bridging the gaps between using Polymer based Web Components in Angular applications.

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.

react-tunnels - 🚇 Render React components in placeholders that are placed somewhere else in the component tree

  •    Javascript

Render React components in placeholders that are placed somewhere else in the component tree. There is a common use case in React apps where you want to define a Layout where the content of some elements is defined by children components. For example, you want to define Layout just once and reuse it for every page but it has a breadcrumb whose steps depend on children components. This tiny library allows you to define tunnels to render from an element to whatever another element in the App, even elements located on top of the tree. It's like Portal but the target is a component instead of a DOM element.

scrollMonitor - A simple and fast API to monitor elements as you scroll

  •    Javascript

The scroll monitor allows you to receive events when elements enter or exit a viewport. It does this using watcher objects, which watch an element and trigger events. Watcher objects also contain information about the element they watch, including the element's visibility and location relative to the viewport. If your scroll container is an element other than the body you can create a container that creates watchers. The scroll monitor was designed to be very fast. On each scroll event the DOM is only touched twice, once to find the document height and again to find the viewport top. No variables are declared, nor are any objects, arrays, or strings created. Watchers are very cheap. Create them liberally.

stickybits - Stickybits is a lightweight alternative to `position: sticky` polyfills 🍬

  •    Javascript

Stickybits is a lightweight alternative to position: sticky polyfills. It works perfectly for things like sticky headers. Key Note: Stickybits expects and works best when the element that will become sticky is wrapped within a parent element that defines when the element starts being sticky and stops being sticky. See below for visual reference.

ramjet - Morph DOM elements from one state to another with smooth animations and transitions

  •    Javascript

npm install ramjet, or download ramjet.js.Ramjet makes it look like your DOM elements are capable of transforming into one another. It does this by cloning the elements (and all their children), transforming the second element (the one we're transforming to) so that it completely overlaps with the first, then animating the two elements together until the first element (the one we're transitioning from) has exactly the same position and dimensions as the second element originally did.

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".

Polymer - Build modern apps using web components

  •    Javascript

Polymer is a lightweight library that helps you take full advantage of Web Components. With Web Components, you can create reusable custom elements that interoperate seamlessly with the browser’s built-in elements, or break your app up into right-sized components, making your code cleaner and less expensive to maintain.

react-onclickoutside - An onClickOutside wrapper for React components

  •    Javascript

This is a React Higher Order Component (HOC) that you can use with your own React components if you want to have them listen for clicks that occur somewhere in the document, outside of the element itself (for instance, if you need to hide a menu when people click anywhere else on your page). Note that this HOC relies on the .classList property, which is supported by all modern browsers, but not by deprecated and obsolete browsers like IE (noting that Microsoft Edge is not Microsoft Internet Explorer. Edge does not have any problems with the classList property for SVG elements). If your code relies on classList in any way, you want to use a polyfill like dom4.

react-track - Track the position of DOM elements. Create cool animations.

  •    Javascript

Avoid it if you can, but for a certain class of (mostly animation-related) problems, you need to query the DOM. This library provides a way to track DOM elements in a functional, declarative manner. It's important to note that AwesomeComponent must be stateful in this example. At the time of writing react-track does not support stateless functional components (SFCs) due to its reliance on the ref attribute, which such components do not provide. In order to track an SFC, wrap it in a TrackedDiv.