Last active
May 8, 2017 16:43
-
-
Save davidbgk/64c835f4cbb2dc456e5fff1018922f2e to your computer and use it in GitHub Desktop.
Test with SkateJS and Firefox 53
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <meta charset=utf-8> | |
| <title>Test skatejs</title> | |
| <link rel=icon href="data:;base64,iVBORw0KGgo="> | |
| <script src=https://unpkg.com/skatejs-web-components@0.0.1/dist/index.min.js></script> | |
| <script src=https://unpkg.com/skatejs@4.6.7/dist/index-with-deps.min.js></script> | |
| <script> | |
| const { skate } = window | |
| class Hello extends skate.Component { | |
| static get is () { | |
| return 'x-hello' | |
| } | |
| static get props () { | |
| return { | |
| name: { attribute: true } | |
| } | |
| } | |
| renderCallback () { | |
| return [ | |
| skate.h('style', '.x-hello { color: red; }'), | |
| skate.h('h1', { class: this.is }, `Hello, ${this.name}`), | |
| ] | |
| } | |
| } | |
| customElements.define(Hello.is, Hello) | |
| class World extends Hello { | |
| static get is () { | |
| return 'x-world' | |
| } | |
| static get props () { | |
| return Object.assign({}, super.props, { | |
| color: { attribute: true } | |
| }) | |
| } | |
| renderCallback () { | |
| return [ | |
| skate.h('style', `.x-world { color: ${this.color}; }`), | |
| skate.h('h2', { class: this.is }, `${this.name}`), | |
| ] | |
| } | |
| } | |
| customElements.define(World.is, World) | |
| </script> | |
| <x-hello name=David></x-hello> | |
| <x-world name=Larlet color=green></x-world> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment