Polymer & Webcomponents
A presentation by Ryan Kool
Web Components
-
HTML Templates
- Shadow Dom
- Custom Elements
- HTML Imports
HTML Templates
<template repeat="{{ user in users }}">
{{user.name}}
</template>
Shadow Dom
Custom Elements
<element name="a-bar" constructor="ABar">
<section>Hello World</section>
<script>
var section = this.querySelector('section');
this.register({
prototype: {
readyCallback: function() {
this.textContent = section.textContent;
},
bar: function() { alert('bar() is called'); }
}
});
</script>
</element>HTML Imports
Polymer?
Polymer is a Library utilizing web components for building elements and applications
What does it look like?
