xtal-decorator
v0.0.56
Published
Extend or Apply methods / properties onto neighboring elements
Downloads
31
Readme
<xtal-decorator>
Propagate props / attributes / light children into other DOM (custom) elements.
xtal-decorator is a web component capable of creating spells of powerful, dark magic on other DOM elements (custom or otherwise).
xtal-decorator is part of a family of components, along with xtal-decor and xtal-deco. xtal-deco and xtal-decor strive to live within the light. They adhere to the principle of opt-in -- requiring DOM elements to request enhanced behavior via custom attributes (xtal-decor) or via proximity (xtal-deco). Both xtal-deco and xtal-decor can apply "behaviors" on their target elements that last for the lifetime of the elements.
xtal-decorator, on the other hand, searches far and deep -- like xtal-decor, it can target any DOM within its Shadow DOM realm, but in addition, xtal-decorator can recursively pierce inside the Shadow DOM of elements within its realm. Once the target is found, though, it can only do quick one-time things like 1) Set Props, or 2) Set Attributes, and/or 3) Insert a template.
<xtal-decorator selector-sequence='["ginny-weasly", "book-bag"]' props='...' attribs='...' insert-template=beforeend>
<template>
...
<tom-riddles-diary></tom-riddles-diary>
...
</template>
</xtal-decorator>
...
<ginny-weasly>
#shadow
<book-bag></book-bag>
</ginny-weasly>
Syntax
Viewing Your Element
$ npm install
$ npm run serve