https://github.com/bahrus/xtal-decorator

Add properties / methods to other DOM (custom) elements
https://github.com/bahrus/xtal-decorator

Last synced: 3 months ago
JSON representation

Add properties / methods to other DOM (custom) elements

• Host: GitHub
• URL: https://github.com/bahrus/xtal-decorator
• Owner: bahrus
• License: mit
• Created: 2017-09-04T12:49:21.000Z (over 7 years ago)
• Default Branch: baseline
• Last Pushed: 2023-04-19T02:38:24.000Z (about 2 years ago)
• Last Synced: 2024-04-25T23:03:23.281Z (about 1 year ago)
• Language: HTML
• Homepage:
• Size: 484 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/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](https://www.npmjs.com/package/xtal-decor) and [xtal-deco](https://www.npmjs.com/package/xtal-deco).  xtal-deco and xtal-decor strive to [live within the light](https://www.pinterest.com/pin/317433473707811040/).  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.

```html

    

    ...

        

    ...

    

...

 #shadow

    

```

## [Syntax](https://bahrus.github.io/api-viewer/index.html?npmPackage=xtal-decorator&jsonPath=custom-elements.json)

## Viewing Your Element

```

$ npm install

$ npm run serve

```