O documento discute Web Components e como eles podem tornar o desenvolvimento web mais simples e produtivo usando Polymer. Web Components permitem criar elementos reutilizáveis através de templates, shadow DOM e custom elements que podem ser usados em qualquer página da web. O Polymer fornece uma biblioteca e ferramentas para criar Web Components de forma fácil.
10. Template é um DocumentFragment que pode ser reaproveitado
<template id=”item”>
<img>
<div>
<p class=”title”></p>
<p></p>
</div>
<checkbox class=”star”>
</checkbox>
</template>
12. class FlagIcon extends HTMLElement {
constructor() {
super();
this._countryCode = null;
}
get country() {
return this._countryCode;
}
set country(v) {
this.setAttribute("country", v);
}
}
class PlasticButton extends HTMLButtonElement {
constructor() {
super();
this.addEventListener("click", () => {
// Executar uma animação super descolada!
});
}
}
Crie seus próprios
elementos!
13.
14. <link rel="import" href="another-element.html">
<dom-module id="element-name">
<template>
<style>
/* Estilos, variáveis e mixers CSS */
</style>
<!-- local DOM do seu elemento -->
<div>{{greeting}}</div> <!-- data bindings no DOM do elemento -->
</template>
<script>
// registro do elemento
Polymer({
is: "element-name",
// Propriedades e métodos do prototype do seu elemento
properties: {
// properties públicas do elemento
greeting: {
type: String,
value: "Hello!"
}
}
});
</script>
</dom-module>
15. <link rel="import" href="another-element.html">
<dom-module id="element-name">
<template>
<style>
/* Estilos, variáveis e mixers CSS */
</style>
<!-- local DOM do seu elemento -->
<div>{{greeting}}</div> <!-- data bindings no DOM do elemento -->
</template>
<script>
// registro do elemento
Polymer({
is: "element-name",
// Propriedades e métodos do prototype do seu elemento
properties: {
// properties públicas do elemento
greeting: {
type: String,
value: "Hello!"
}
}
});
</script>
</dom-module>
16. <link rel="import" href="another-element.html">
<dom-module id="element-name">
<template>
<style>
/* Estilos, variáveis e mixers CSS */
</style>
<!-- local DOM do seu elemento -->
<div>{{greeting}}</div> <!-- data bindings no DOM do elemento -->
</template>
<script>
// registro do elemento
Polymer({
is: "element-name",
// Propriedades e métodos do prototype do seu elemento
properties: {
// properties públicas do elemento
greeting: {
type: String,
value: "Hello!"
}
}
});
</script>
</dom-module>
17. <link rel="import" href="another-element.html">
<dom-module id="element-name">
<template>
<style>
/* Estilos, variáveis e mixers CSS */
</style>
<!-- local DOM do seu elemento -->
<div>{{greeting}}</div> <!-- data bindings no DOM do elemento -->
</template>
<script>
// registro do elemento
Polymer({
is: "element-name",
// Propriedades e métodos do prototype do seu elemento
properties: {
// properties públicas do elemento
greeting: {
type: String,
value: "Hello!"
}
}
});
</script>
</dom-module>