Directory

← Back

attrs-observe

Observe presence of list of attributes

Author

Rating

Popularity

<100

<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:

  1. XSLT, supported by all browsers (including Chrome, Version 1!).
  2. The slot mechanism that comes with Shadow DOM.
  3. 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.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • xtal-latx#0.0.17
Released
2018-07-21
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Browser
Browser Independent

attrs-observe - Vaadin Add-on Directory

Observe presence of list of attributes attrs-observe - Vaadin Add-on Directory
# \ 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
``` 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.
Online