Polymer/polymer Using elements - Polymer Edit on Github Introduction Polymer provides a large collection of elements for you to pick from. Of course, these elements have all of the features described in Custom Elements 101. Using them is straightforward: You don’t have to care how they work. Polymer’s set of elements includes the usual suspects like buttons and other UI components, but also includes non-UI elements like <polymer-ajax>. Installing elements The first step in using an element (or a set of elements) is to install it locally into your app using Bower. Installing a single element Elements can be installed individually as needed. bower install --save Polymer/polymer-ajax Note: Polymer/polymer-ajax is shorthand for the element’s github repo, Running this command adds a bower_components/ folder and fills it with <polymer-ajax>: yourapp/ bower_components/ platform/ polymer/ polymer-ajax/ Using the --save flag adds the element to your app’s bower.json file: Installing an element set <!
Custom elements 101 - Polymer Edit on Github Introduction If HTML was reinvented tomorrow, it would provide more features and greater capability than today’s built-in elements. For example, imagine you’re building a photo booth app to capture snapshots, display thumbnails, and cycle through recent photos. Fortunately, Custom Elements pave a path to Polymer’s “Everything is an element” philosophy. Custom element APIs A critical realization is that custom elements are no different than standard HTML elements. properties methods attributes events how the element handles its children Take an HTML <select>. <select selected="0"><option>Hello World</option></select> … or instantiated in JavaScript: var s = document.createElement('select'); s.innerHTML = '<option>Hello World</option>'; Once you have a reference to an element, you can attach event listeners, access properties, or call its methods: s.addEventListener('change', function(e) { alert(this.selectedIndex == 0); }); Guess what? Types of elements UI elements Non-UI elements
Understanding Polymer - Polymer Edit on Github Polymer isn’t like other frameworks or libraries you might have used before. To fully understand what it is, you’ll need to understand Polymer’s world-view and take a quick tour through its three conceptual layers. Everything is an Element: The Polymer world-view The philosophy that “Everything is an element” is core to understanding Polymer. Ever since the beginning of the web, browsers have shipped with a default set of elements. Functional. Elements are pretty great. Polymer returns to our roots. That brings us back to the world-view of Polymer: Everything is an element When we say “element”, we mean a real element, with all of the great properties of a built-in element. The world looks different when you take this view. In the old world, script was your concrete, and the solution to most of your problems was to use gobs of it. Layers of Polymer There are three conceptual layers to Polymer: Next steps Custom Elements 101