Polymer
Components
- AngularJS
- React
- Ember
Based on Web Components
Custom Elements
document.registerElement('x-foo', {
prototype: Object.create(HTMLParagraphElement.prototype, {
firstMember: {
get: function() { return "foo"; },
enumerable: true,
configurable: true
},
// specify more members for your prototype.
// ...
}),
extends: 'p'
});<body>
...
<x-foo></x-foo>
...
</body>HTML Imports
<link rel="import" href="/imports/heart.html"><template>
<template>
<style>
:host {
background: #f8f8f8;
padding: 10px;
transition: all 400ms ease-in-out;
box-sizing: border-box;
border-radius: 5px;
width: 450px;
max-width: 100%;
}
:host(:hover) {
background: #ccc;
}
div {
position: relative;
}
header {
padding: 5px;
border-bottom: 1px solid #aaa;
}
h3 {
margin: 0 !important;
}
textarea {
font-family: inherit;
width: 100%;
height: 100px;
box-sizing: border-box;
border: 1px solid #aaa;
}
footer {
position: absolute;
bottom: 10px;
right: 5px;
}
</style>
<div>
<header>
<h3>Add a Comment</h3>
</header>
<content select="p"></content>
<textarea></textarea>
<footer>
<button>Post</button>
</footer>
</div>
</template>
<div id="host">
<p>Instructions go here</p>
</div>
<script>
var shadow = document.querySelector('#host').createShadowRoot();
shadow.appendChild(document.querySelector('template').content);
</script>Shadow DOM
<button>Hello, world!</button>
<script>
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.textContent = 'こんにちは、影の世界!';
</script>Polymer
Polymer 首先针对 Web Components 做了 polyfill，并将其进一步封装和增强，满足日常开发的习惯和需求。
<polymer-element name="custom-element">
<template>
<style>
:host {
...
}
</style>
<div>...</div>
</template>
<script>
(function() {
Polymer('custom-element', {
onMenuSelect: function () {
...
}
});
})();
</script>
</polymer-element>
5 mins to build an custom element ourselfs
Why Polymer?
encapsulation /inˌkæpsjuˈleiʃən/
AngularJS Directive 的标准化替代方案
New Problems with Polymer
- Concat?
- Dependency Management?
- Project Structure?
Polymer
By Wangye Zhao
Polymer
- 1,893
