Aug
10
Polymer – Custom Elements ”; Previous Next Polymer is a framework that allows creating custom elements using standard HTML elements. Custom web elements provide the following features − It provides custom element name with associating class. When you change the state of custom element instance, it will request the lifecycle callbacks. If you change the attributes on an instance, then callback will be requested. You can define the custom element using ES6 class and class can be associated with the custom element as shown in the following code. //ElementDemo class is extending the HTMLElement class ElementDemo extends HTMLElement { // code here }; //link the new class with an element name window.customElements.define(”element-demo”, ElementDemo); The custom element can be used as a standard element as shown below − <element-demo></element-demo> Note − Custom element name should start with a lower case letter and contain a dash between the names. Custom Element Lifecycle Custom element lifecycle provides a set of custom element reactions which are responsible for change in element lifecycle and are defined in the following table. Sr.No. Reactions & Description 1 constructor When you create an element or define the previously-created element, this element reaction will be called. 2 connectedCallback When you add an element to a document, this element reaction will be called. 3 disconnectedCallback When you remove an element from a document, this element reaction will be called. 4 attributeChangedCallback Whenever you change, append, remove, or replace an element from a document, this element reaction will be called. Element Upgrades We can use custom elements before defining them by specification and any existing instances of an element will be upgraded to the custom class by adding a definition to that element. The custom element state contains the following values − uncustomized − The valid custom element name is either a built-in element or an unknown element, which cannot become a custom element. undefined − The element can have a valid custom element name, but it cannot be defined. custom − The element can have a valid custom element name, which can be defined and upgraded. failed − Trying to upgrade the failed element of an invalid class. Defining an Element A custom element can be defined by creating a class which extends Polymer.Element and it passes the class to customElements.define method. The class contains is getter method that returns a HTML tag name of the custom element. For instance − //ElementDemo class is extending the Polymer.Element class ElementDemo extends Polymer.Element { static get is() { return ”element-demo”; } static get properties() { . . . . . . } constructor(){ super(); . . . . . . } . . . . . . } //Associate the new class with an element name window.customElements.define(ElementDemo.is, ElementDemo); // create an instance with createElement var el1 = document.createElement(”element-demo”); Imports and APIs The Polymer elements can be defined by specifying the following three HTML imports − polymer-element.html − It specifies the Polymer.Element base class. legacy-element.html − It extends Polymer.Element using Polymer.LegacyElement base class and adds 1.x compatible legacy API. It also creates hybrid elements by defining the legacy Polymer() factory method. polymer.html − It comprises the Polymer base classes along with helper elements, which were included in the 1.x polymer.html. Define an Element in the Main HTML Document You can define an element in the main HTML document using HTMLImports.whenReady() function. Example The following example shows how to define an element in the main HTML document. Create an index.html file and add the following code. <!doctype html> <html lang = “en”> <head> <title>Polymer Example</title> <script src = “bower_components/webcomponentsjs/webcomponents-lite.js”></script> <link rel = “import” href = “bower_components/polymer/polymer.html”> <link rel = “import” href = “define-element.html”> </head> <body> <define-element></define-element> </body> </html> Now create a custom element called define-element.html and include the following code. <dom-module id = “define-element”> <template> <h2>Welcome to Tutorialspoint!!!</h2> </template> <script> HTMLImports.whenReady(function(){ Polymer ({ is: “define-element” }) }) </script> </dom-module> Output To run the application, navigate to the created project directory and run the following command. polymer serve Now open the browser and navigate to http://127.0.0.1:8081/. Following will be the output. Define a Legacy Element Legacy element can be used to register an element using the Polymer function, which takes the prototype for a new element. The prototype should contain is which defines the HTML tag name for a custom element. Example //registering an element ElementDemo = Polymer ({ is: ”element-demo”, //it is a legecy callback, called when the element has been created created: function() { this.textContent = ”Hello World!!!”; } }); //”createElement” is used to create an instance var myelement1 = document.createElement(”element-demo”); //use the constructor create an instance var myelement2 = new ElementDemo(); Lifecycle Callbacks Lifecycle callbacks are used to accomplish the tasks for built-in features of Polymer.Element class. Polymer uses ready callback, which will be invoked when Polymer completes creating and initializing DOM elements. Following is a list of legacy callbacks in Polymer.js. created − It is called when you create an element before setting the property values and initializing local DOM. ready − It is called when you create an element after setting the property values and initializing local DOM. attached − It is called after attaching the element to the document and can be called more than one time throughout the lifetime of an element. detached − It is called after detaching the element from the document and can be called more than once throughout the lifetime of an element. attributeChanged − It is called when there are changes in an element”s attributes and it holds the attribute changes, which are not compatible with the declared properties. Declaring Properties The properties can be declared on an element to add default value and other specific features in the data system and they can be used to specify the following features − It specifies the property type and default value. It calls the observer method, when there are changes in the property value. It specifies the read-only status to stop the unexpected changes to the property value. It provides