be-prop-slotting
v0.0.1
Published
Transfer values from light children to host.
Downloads
4
Maintainers
Readme
be-prop-slotting
Transfer values from light children to host.
Example 1a
<my-custom-element-1-a itemscope>
#shadow
<slot name=test be-prop-slotting></slot>
<a itemprop=someStringProp slot=test href=https://cnn.com>This is CNN</a>
<input type=checkbox name=isHappy slot=test>
<link itemprop=isVegetarian slot=test href=https://schema.org/True>
<meta itemprop=age content=12 slot=test be-value-added='as number.'>
</my-custom-element-1-a>
... sets oMyCustomElement's someStringProp property to https://cnn.com at the moment when the hyperlink is slotted, and keeps the properties in sync. Likewise with isHappy, isVegetarian, age.
Example 1b [TODO - once use case is found]
<my-custom-element itemscope>
#shadow
<peer-element -is-absolutely-grateful></peer-element>
<slot name=test -is-happy=isAbsolutelyGrateful be-prop-slotting></slot>
<a itemprop=someOtherStringProp slot=test -slot-prop=someStringProp href=https://cnn.com>This is CNN</a>
<input type=checkbox name=isHappy slot=test>
<link itemprop=isVegetarian slot=test href=https://schema.org/True>
<meta itemprop=age content=12 slot=test be-value-added='as number.'>
</my-custom-element>
... same as Example 1a, but now we specify non default places to pass property value to.
Example 2 [TODO -- need use case]
<my-custom-element>
#shadow
<slot name=inputEl be-prop-slotting='
of new weak ref ( @ my input element ) passed to input element.
'></slot>
<input name=myInput slot=inputEl type=url>
</my-custom-element>
... sets oMyCustomElement's input element property to weakRef of oInputElement.
Viewing Demos Locally
Any web server that can serve static files will do, but...
- Install git.
- Fork/clone this repo.
- Install node.js.
- Open command window to folder where you cloned this repo.
npm install
npm run serve
- Open http://localhost:3030/demo/ in a modern browser.
Running Tests
> npm run test
Using from ESM Module:
import 'be-prop-slotting/be-prop-slotting.js';