Polymer library - Polymer Project

Time 2021-08-18 19:05:52

Web Name: Polymer library - Polymer Project

WebSite: http://www.polymer-project.org

ID:187184

Keywords:

Polymer,library,Project,

Description:

The Polymer library is in maintenance mode. For new development, we recommend Lit. The Polymer library provides a set of features for creating custom elements. These features aredesigned to make it easier and faster to make custom elements that work like standard DOM elements.Similar to standard DOM elements, Polymer elements can be:Instantiated using a constructor or document.createElement.Configured using attributes or properties.Populated with internal DOM inside each instance.Responsive to property and attribute changes.Styled with internal defaults or externally.Responsive to methods that manipulate its internal state.A basic Polymer element definition looks like this:import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';// Define the element's API using an ES2015 classclass XCustom extends PolymerElement { // Define optional shadow DOM template static get template() { return html` style /* CSS rules for your element */ /style !-- shadow DOM for your element -- div [[greeting]] /div !-- data bindings in shadow DOM -- `; } // Declare properties for the element's public API static get properties() { return { greeting: { type: String } } } constructor() { super(); this.greeting = 'Hello!'; } // Add methods to the element's public API greetMe() { console.log(this.greeting); }}// Register the x-custom element with the browsercustomElements.define('x-custom', XCustom);This guide divides the features into the following groups:Custom elements. Registering anelement associates a class with a custom element name. Theelement provides callbacks to manage its lifecycle. Polymer also lets you declare properties,to integrate your element's property API with the Polymer data system.Shadow DOM. Shadow DOM provides a local, encapsulated DOM tree for your element.Polymer can automatically create and populate a shadow tree for your element from a DOMtemplate.Events. Polymer provides a declarative syntax for attaching event listeners toshadow DOM children. It also provides an optional library for handling gesture events.Data system. The Polymer data system provides data binding to properties andattributes; property observers; and computed properties.If you're upgrading an existing 2.x element to 3.x, see theUpgrade guide for advice.If you're looking for the latest changes in this release, see theRelease notes.

TAGS:Polymer library Project 

<<< Thank you for your visit >>>

Hot Websites