Repository files navigation

Skate is a functional reactive abstraction overthe web component standards as a set of packages that enables you to write small, fast and scalable web components using popular view libraries such as React, Preact and LitHTML.

• 🌏 Cross-framework compatible components.
• ⚛️ Render components using your favourite view library, or none at all.
• 👑 Guided conventions for best-practices when reflecting between, and reacting to attributes, properties and events.
• 🌟 Full TypeScript support.
• 📚 Docshttps://skatejs.netlify.com.

The simplest way to get up and running is to start with a pre-configured element such as@skatejs/element-lit-html.

npm i @skatejs/element-lit-html

importElement,{html}from'@skatejs/element-lit-html';exportdefaultclassextendsElement{staticgetprops(){return{name:String};}render(){returnhtml`      Hello,${this.name}!    `;}}

1. Todo list

There's a CLI to get you up and running:https://skatejs.netlify.com/packages/cli.

$ npm i -g @skatejs/cli$ skatejs

Skate builds upon theCustom Elements andthe Shadow DOM standards.It is capable of operating without the Shadow DOM — it just means youdon't get any encapsulation of your component's HTML or styles. It also meansthat it's up to you to provide a way to project content (i.e.<slot>). It'shighly recommended you use Shadow DOM whenever possible.

Though most modern browsers support these standards, some still need polyfillsto implement missing or inconsistent behaviours for them.

For more information on the polyfills, seethe web components polyfill documentation, emphasis on the caveats.

Skate supports all evergreens and IE11, and is subject to the browser supportmatrix of the polyfills.

Support us with a monthly donation and help us continue our activities.Become a backer!

Become a sponsor and get your logo on our README on Github with a link to yoursite.Become a sponsor!