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?

If this caught your interest

Try it out!

Polymer & Webcomponents

By tig2002pet

Polymer & Webcomponents

  • 110