This document introduces key concepts about Web Components including Custom Elements, Templates, Shadow DOM, and HTML Imports. It explains how to define custom elements using the Custom Elements API and register them, how to use templates to populate elements, and how Shadow DOM works to encapsulate styles. Polymer is introduced as a library that makes it easier to build Web Components by providing additional capabilities like data binding and gestures beyond the core Web Components specs.
10. Custom Elements
䜹䝇䝍䝮せ⣲䜢䜲䞁䝇䝍䞁䝇
var xElem = new XElement();
document.body.appendChild(xElem);
var xElem = document.createElement(`x-element`);
<x-element></x-element>
27. Web Components䜢䛔䜔䛩䛟
without polymer
<template id=”xtemplate”>...</template>
<script>
var XElm= document.registerElement(‘x-element’),{
prototype:{
createdCallback: function(){
var t = document.equalSelector(‘xtemplate’);
var c = document.importNode(t.content, true);
var shadow = this.createShadowRoot();
shadow.appendChild(c);
}
}
});
</script>
28. Web Components䜢䛔䜔䛩䛟
with polymer
<polymer-element name=”x-element”>
䚷<template>...</template>
</polymer-element>
䛔䛔ឤ䛨䛻wrap䛧䛶䛟䜜䛶䜛䚹
29. Web Components+α
Web Animations
Two way bindings
Layout Attributes
Gestures
䛔䜝䛔䜝䛒䜛䜘䛖䛷䛩䛜ឡ䛧䜎䛩.