Displaying 1 to 20 from 44 results

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.

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


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.

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


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




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.

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

ajax-form - HTML forms on performance-enhancing drugs


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.


custom-elements - A polyfill for HTML Custom Elements v1


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.

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.

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.

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.

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.

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.

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.

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.