attrs-observe

<attrs-observe>

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:

• XSLT, supported by all browsers (including Chrome, Version 1!).
• The slot mechanism that comes with Shadow DOM.
• Hopefully soon, template instantiation, 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:

<div>
I am <span c="whatAmI"></span>
</div>
<attrs-observe observe="c" input='{"whatAmI": "the walrus"}'></attrs-observe>

produces:

I am <span c="whatAmI">the walrus</span>

Property setting

    <div>
        <label for="joker">Don't you think the joker laughs at you</label><input id="joker" type="checkbox" c="well?">
    </div>
    <attrs-observe observe="c" input='{"well?": {"checked": true}}'></attrs-observe>

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

<div>
I am the <span c="whatAmI"></span>
</div>
<script nomodule>
({
    whatAmI: s =>{
        s.style.color = 'yellow';
        s.innerText = 'Eggman';
    }
})
</script>
<p-d-x on="eval" to="{input.whatAmI:whatAmI"></p-d-x>
<attrs-observe observe="c"></attrs-observe>

Produces

<div>
    I am the <span c="whatAmI" style="color: yellow;">Eggman</span>
</div>

One can specify whether to monitor for new nodes recursively thoughout the DOM tree by specifying deeply:

<attrs-observe observe="c" deeply></attrs-observe>

Install the Polymer-CLI

First, make sure you have the Polymer CLI and npm (packaged with Node.js) 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. Run polymer test to run your application's test suite locally.