Skip to content

Instantly share code, notes, and snippets.

@davidbgk davidbgk/index.html
Last active May 8, 2017

Embed
What would you like to do?
Test with SkateJS and Firefox 53
<!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
You can’t perform that action at this time.