pass-up

pass-up (or p-u for short) is a web component, which, together with pass-down, or p-d for short provides (limited) declarative two-way binding support of web components.

p-u is one member of the family of web components that forms a framework for declaratively gluing web components together, using HTML as the preferred mime-type for delivering content.

Sample Syntax

<div id=target1></div>
<div id=firstLine disabled data-why="There was an old lady who swallowed a fly;">I don't know why she swallowed a fly - Perhaps she'll die!</div>
<p-u on=load to=/target1 prop=textContent init-val=dataset.why></p-u>
<div target2 id=target2></div>
<div id=thirdLine disabled data-spider="There was an old lady who swallowed a spider;"> </div>
<p-u on=click to-nearest-up-match=[target2] prop=textContent val=target.dataset.spider></p-u>

Import Maps

If using a static file web server with no bundling, the following entries are required in your import map:

<script type=importmap>
    {
        "imports": {
        "xtal-element/": "../node_modules/xtal-element/",
        "trans-render/": "../node_modules/trans-render/",
        "on-to-me/": "../node_modules/on-to-me/"
        }
    }
</script>

Viewing Your Element

To view this element locally:

1. Install git, npm
2. Clone or fork this git repo.
3. Open a terminal from the folder created in step 2.
4. Run npm install
5. Run npm run serve
6. Open http://localhost:3030/demo/dev

Running Tests

$ npm tests