Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Chrome shadow DOM

Published in: Technology
  • Be the first to comment


  1. 1. Polymer 1.0 Jason
  2. 2. What is Polymer? ●The Polymer library is designed to make it easier and faster for developers to create great, reusable components for the modern web. ●With custom elements, you can extend the vocabulary of HTML with your own elements. Elements that provide sophisticated UI.
  3. 3. Web Component ●HTML Template ●Custom Element ●Shadow DOM ●HTML Import
  4. 4. Installing with Bower Project setup > bower init > bower install --save Polymer > bower update
  5. 5. Quick tour of Polymer ● Register an element ● Add local DOM ● Compose with local DOM ● Use data binding ● Declare a property ● Bind to a property
  6. 6. Register an element ● To register a new element, call the Polymer function, which registers a new element with the browser. Registering an element associates a tag name with a prototype, so you can add properties and methods to your custom element. The custom element’s name must contain a dash (-).
  7. 7. Register an element Index.html <html> <head> <script src="webcomponents-lite.min.js"></script> <link rel="import" href="first-component.html"> </head> <body> <first-component></first-component> </body> </html> first-component.html <link rel="import" href="bower_components/polymer/polymer.html"> <script> Polymer({ is: "first-component", ready: function() { this.textContent = "I'm a proto-element." } }); </script>
  8. 8. Custom Element Lifecycle callbacks ● created instead of createdCallback ● attached instead of attachedCallback ● detached instead of detachedCallback ● attributeChanged instead of attributeChangedCallback
  9. 9. Custom Element Lifecycle callbacks Polymer({ is: "polymer-lifecycle", ready: function(){ }, created: function() {}, attached: function() {}, detached: function() {}, attributeChanged: function(name, type) { console.log(this.localName + '#' + + ' attribute ' + name + ' was changed to ' + this.getAttribute(name)); } }); created ready attached
  10. 10. Add local DOM ● Many elements include some internal DOM nodes to implement the element’s UI and behavior. Polymer calls this local DOM, and it provides an easy way to specify it. ● Local DOM is encapsulated inside the element.
  11. 11. Add local DOM Index.html <html> <head> <script src="webcomponents-lite.min.js"></script> <link rel="import" href="dom-element.html"> </head> <body> <dom-element></dom-element> </body> </html> dom-element.html <link rel="import" href="bower_components/polymer/polymer.html"> <dom-module id="dom-element"> <template> <p>I'm a DOM element. </p> </template> <script> Polymer({ is: "dom-element" }); </script> </dom-module>
  12. 12. Compose with local DOM ● Local DOM lets you control composition. The element’s children can be distributed so they render as if they were inserted into the local DOM tree.
  13. 13. Compose with local DOM Index.html <html> <head> <script src="webcomponents-lite.min.js"></script> <link rel="import" href="picture-frame.html"> </head> <body> <picture-frame> <img src=”image1.jpg” alt=”” /> </picture-frame> </body> </html> picture-frame.html <link rel="import" href="polymer/polymer.html"> <dom-module id="picture-frame"> <template> <style> div { background-color: #ccc; } </style> <div> <content></content> </div> </template> <script> Polymer({ is: "picture-frame" }); </script> </dom-module>
  14. 14. Use data binding ● Data binding is a great way to quickly propagate changes in your element and reduce boilerplate code. You can bind properties in your component using the “double-mustache” syntax ({{}}). The {{}} is replaced by the value of the property referenced between the brackets.
  15. 15. Use data binding Index.html <html> <head> <script src="webcomponents-lite.min.js"></script> <link rel="import" href="name-tag.html"> </head> <body> <name-tag></name-tag> </body> </html> name-tag.html <link rel="import" href="polymer.html"> <dom-module id="name-tag"> <template> This is <b>{{owner}}</b>'s name-tag element. </template> <script> Polymer({ is: "name-tag", ready: function() { this.owner = "Daniel"; } }); </script> </dom-module>
  16. 16. Declare a property ● Properties are an important part of an element’s public API. Polymer declared properties support a number of common patterns for properties — setting default values, configuring properties from markup, observing property changes, and more..
  17. 17. Declare a property Index.html <html> <head> <script src="webcomponents-lite.min.js"></script> <link rel="import" href="configurable-name-tag.html"> </head> <body> <configurable-name-tag owner="Scott"></configurable-name-tag> </body> </html> configurable-name-tag.html <dom-module id="configurable-name-tag"> <template> This is <b>{{owner}}</b>'s configurable-name-tag . </template> <script> Polymer({ is: "configurable-name-tag", properties: { owner: { type: String, value: "Daniel" } } }); </script> </dom-module>
  18. 18. Bind to a property ● In addition to text content, you can bind to an element’s properties (using property-name="{{binding}}"). Polymer properties can optionally support two-way binding. ●This example uses two-way binding: binding the value of a custom input element (iron-input) to the element’s owner property, so it’s updated as the user types
  19. 19. Bind to a property Index.html <html> <head> <script src="webcomponents-lite.min.js"></script> <link rel="import" href="editable-name-tag.html"> </head> <body> <editable-name-tag></editable-name-tag> </body> </html> editable-name-tag.html <link rel="import" href="polymer.html"> <link rel="import" href="iron-input/iron-input.html"> <dom-module id="editable-name-tag"> <template> This is a <strong>{{owner}}</strong>'s editable-name-tag. <input is="iron-input" bind-value="{{owner}}"/> </template> <script> Polymer({ is: "editable-name-tag", properties: { owner: { type: String, value: "Daniel" } } }); </script> </dom-module>
  20. 20. Reference Polymer 1.0 - Shadow - Html Import - Custom Elements -