Apresentada no GDG Recife - itshackademic
Desbravamos Web Components e Polymer, mostrando as especificação, com muito live code e toda a mágica de Web Components.
21. <script>
(function() {
// Creates an object based in the HTML Element prototype
var element = Object.create(HTMLElement.prototype);
// Fires when an instance of the element is created
element.createdCallback = function() {};
// Fires when an instance was inserted into the document
element.attachedCallback = function() {};
// Fires when an instance was removed from the document
element.detachedCallback = function() {};
// Fires when an attribute was added, removed, or updated
element.attributeChangedCallback = function(attr, oldVal,
newVal) {};
document.registerElement('menu-tabs', {
prototype: element
});
}());
</script>
22. <!-- Define your custom element -->
<polymer-element name="menu-tabs">
<script>
Polymer('menu-tabs', {
// Fires when an instance of the element is created
created: function() {},
// Fires when the "<polymer-element>" has been fully prepared
ready: function() {},
// Fires when the element was inserted into the document
attached: function() {},
// Fires when the element was removed from the document
detached: function() {},
// Fires when an attribute was added, removed, or updated
attributeChanged: function(attr, oldVal, newVal) {}
});
</script>
</polymer-element>
25. <!-- Define your custom element -->
<polymer-element name="menu-tabs" extends="nav">
<script>
Polymer('menu-tabs', {
// Fires when an instance of the element is created
created: function() {},
// Fires when the "<polymer-element>" has been fully prepared
ready: function() {},
// Fires when the element was inserted into the document
attached: function() {},
// Fires when the element was removed from the document
detached: function() {},
// Fires when an attribute was added, removed, or updated
attributeChanged: function(attr, oldVal, newVal) {}
});
</script>
</polymer-element>