skatejs

2020-02-14

skatejs

Skate is a library built on top of the W3C web component specs that enables you to write functional and performant web components with a very small footprint.

Skate

Build StatusDownloads per monthJoin the chat at https://gitter.im/skatejs/skatejsFollow @skate_js on Twitter

Skate is a functional reactive abstraction over the web component standardsas 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.

  • <g-emoji class="g-emoji" alias="earth_asia" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f30f.png">🌏</g-emoji> Cross-framework compatible components.
  • <g-emoji class="g-emoji" alias="atom_symbol" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/269b.png">⚛️</g-emoji> Render components using your favourite view library, or none at all.
  • <g-emoji class="g-emoji" alias="crown" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f451.png">👑</g-emoji> Guided conventions for best-practices when reflecting between, and reacting to attributes, properties and events.
  • <g-emoji class="g-emoji" alias="star2" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f31f.png">🌟</g-emoji> Full TypeScript support.
  • <g-emoji class="g-emoji" alias="books" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f4da.png">📚</g-emoji> Docs https://skatejs.netlify.com.

Getting started

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

Simple example

import Element, { html } from '@skatejs/element-lit-html';

export default class extends Element {
  static get props() {
    return {
      name: String
    };
  }
  render() {
    return html`
      Hello, ${this.name}!
    `;
  }
}

Other examples

  1. Todo list

Cli

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

$ npm i -g @skatejs/cli
$ skatejs

Polyfills

Skate builds upon the Custom Elementsand the Shadow DOMstandards. It is capable of operating without the Shadow DOM — it just means you don't get any encapsulation of your component's HTML or styles. It also means that it's up to you to provide a way to project content (i.e. <slot>). It's highly recommended you use Shadow DOM whenever possible.

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

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

Browser Support

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

Backers

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

Sponsors

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

以上是 skatejs 的使用教程帮助文档。


上一篇:skatejs-template-html
下一篇:@atlassian/tipsy
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部