attrs-observe - Vaadin Add-on Directory

Observe presence of list of attributes

# \ Observe and act on the presence of an attribute attrs-observe is a vanilla-ish web component whose primary purpose is to populate DOM with dynamic data. You may be shocked to learn that this isn't the first such library that does this. The size of this one is ~1.4kb minified and gzipped. From the point of view of using what's built into the browser, as far as dynamically populating DOM from data, skipping an early Microsoft expiriment, there's: 1) [XSLT](https://www.w3schools.com/xml/xsl_intro.asp), supported by all browsers (including Chrome, Version 1!). 2) The slot mechanism that comes with Shadow DOM. 3) Hopefully soon, [template instantiation](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Template-Instantiation.md), which would likely diminish the benifit of this web component. Unlike many existing alternatives, this one just populates an existing DOM node tree. Each time populating finishes, an event, "nodes-populated-changed" is emitted. ## Simple data populating: ```html

I am

``` produces: ```html I am the walrus ``` ## Property setting ```html

Don't you think the joker laughs at you

``` The input attribute / property of attrs-observe does not need to be set via an inline attribute as shown in the two previous examples. It can be set via a framework or by some other web component. If the input property changes, it will be reapplied to all the elements with the observed attribute. produces a checked input. ## Functional ```html

I am the

``` Produces ```html

I am the Eggman

``` One can specify whether to monitor for new nodes recursively thoughout the DOM tree by specifying deeply: ```html ``` ## Install the Polymer-CLI First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally. ## Viewing Your Element ``` $ polymer serve ``` ## Running Tests ``` $ polymer test ``` Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.