xtal-decorator - Vaadin Add-on Directory

Add properties / methods to other DOM (custom) elements

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/xtal-decorator) # \

Add properties / methods to other DOM (custom) elements. xtal-deco, xtal-decor and xtal-decorator provide a way of adding behavior to other elements -- "decorating" the element. The affected elements can be native DOM elements, or custom element instances. xtal-decorator extends xtal-decor, which extends xtal-deco, each extension adding more functionality. xtal-deco and xtal-decor only affect the next sibling element. xtal-decorator can apply to multiple elements. The syntax is heavily influenced by Vue / Polymer 1. ## Adding behavior to the next element instance with xtal-deco Syntax: ```html

drinks sold. ``` We can see there are four top level categories of things that we can attach -- event handlers via "on", properties with setters / getters via "props", methods and vals. Any time a prop changes, the element fires an event: [propName]-changed, and also calls method onPropsChange (actually a symbol-protected alias). "vals" is used to simply set some initial property values on the target element(s). **NB I:** Here we are adding a property onto an existing native DOM element -- button in this case. Although the property is added onto the element, and no attempt to do any kind of super.prop or super.method call is made, I can't completely rule out the possibility that something could go horribly wrong should a property with the same name be introduced into the browser native button element. Please act responsibly and only choose property names (or method names) -- in this example "numberOfDrinksSold" -- whose chance of getting added natively to the button DOM element are lower than seeing a Libertarian POTUS in your pet mouse's lifespan. These web components have a protective curse -- anyone trying to add a property or a method which has a higher probability will result in the developer receiving a one-way ticket to Azkaban. If you really want to play it safe, there is an attribute, "use-symbols", which allows you to use symbols, which should be 100% safe: ```html

drinks sold. ``` I *think* using property and method names starting with an underscore should also allow you to steer clear of the dementors. That would be easier than working with symbols. ## xtal-decor, xtal-decorator xtal-decor and xtal-decorator are the kind of web components you would find hanging out in Knockturn Alley. ### Attach Script xtal-decor, like xtal-deco, can also attach properties and functions to the next element, but you need to be more explicit: ```html ``` ### Template insertion into neighboring web component's Shadow DOM. **NB II:** The benefits of this functionality should drop dramatically as ::part / ::theme becomes a [::thing](https://meowni.ca/posts/part-theme-explainer/). Syntax: ```html ``` ### Template insertion deep inside neighboring web component's Shadow DOM [Not fully tested] ```html ``` The word "and" is optional and doesn't do anything other than make the markup more readable. ### xtal-decorator -- Extra Restricted Section xtal-decorator extends xtal-decor, but rather than just target the next element, it can target all elements within the shadow DOM realm matching a selector: ```html ... ``` ## Syntax Reference ``` --> ## 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 ```

View on NPM
View on GitHub
GitHub Homepage
Documentation
Issue tracker
Online Demo
License

xtal-decorator version 0.0.0
### Dependencies Polymer/polymer#^2.0.0

xtal-decorator version 0.0.1
### Dependencies Polymer/polymer#^2.0.0

xtal-decorator version 0.0.2
### Dependencies Polymer/polymer#^2.0.0

xtal-decorator version 0.0.3
### Dependencies Polymer/polymer#^2.0.0

xtal-decorator version 0.0.4
### Dependencies Polymer/polymer#^2.0.0

xtal-decorator version 0.0.5
### Dependencies Polymer/polymer#^2.0.0

xtal-decorator version 0.0.6
### Dependencies Polymer/polymer#^2.0.0

xtal-decorator version 0.0.7
### Dependencies Polymer/polymer#^2.0.0 * PolymerElements/paper-button#^2.0.0 * PolymerElements/paper-input#^2.0.2

xtal-decorator version 0.0.8
### Dependencies Polymer/polymer#^2.0.0 * PolymerElements/paper-button#^2.0.0 * PolymerElements/paper-input#^2.0.2

xtal-decorator version 0.0.9
### Dependencies Polymer/polymer#^2.0.0 * PolymerElements/paper-button#^2.0.0 * PolymerElements/paper-input#^2.0.2

xtal-decorator version 0.0.10
### Dependencies * @bower_components/accessibility-developer-tools#GoogleChrome/accessibility-developer-tools#^2.10.0 * @bower_components/async#caolan/async#^1.5.0 * @bower_components/chai#chaijs/chai#^3.2.0 * @bower_components/font-roboto#PolymerElements/font-roboto#^1 * @bower_components/iron-a11y-announcer#PolymerElements/iron-a11y-announcer#1 - 2 * @bower_components/iron-a11y-keys-behavior#polymerelements/iron-a11y-keys-behavior#1 - 2 * @bower_components/iron-autogrow-textarea#PolymerElements/iron-autogrow-textarea#1 - 2 * @bower_components/iron-behaviors#PolymerElements/iron-behaviors#1 - 2 * @bower_components/iron-checked-element-behavior#PolymerElements/iron-checked-element-behavior#1 - 2 * @bower_components/iron-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0 * @bower_components/iron-flex-layout#polymerelements/iron-flex-layout#1 - 2 * @bower_components/iron-form-element-behavior#PolymerElements/iron-form-element-behavior#1 - 2 * @bower_components/iron-input#PolymerElements/iron-input#1 - 2 * @bower_components/iron-location#PolymerElements/iron-location#1 - 2 * @bower_components/iron-meta#PolymerElements/iron-meta#1 - 2 * @bower_components/iron-validatable-behavior#PolymerElements/iron-validatable-behavior#1 - 2 * @bower_components/lodash#lodash/lodash#^3.7.0 * @bower_components/marked#chjj/marked#~0.3.6 * @bower_components/marked-element#polymerelements/marked-element#1 - 2 * @bower_components/mocha#mochajs/mocha#^3.1.2 * @bower_components/paper-behaviors#PolymerElements/paper-behaviors#1 - 2 * @bower_components/paper-button#PolymerElements/paper-button#^2.0.0 * @bower_components/paper-input#PolymerElements/paper-input#^2.0.2 * @bower_components/paper-ripple#PolymerElements/paper-ripple#1 - 2 * @bower_components/paper-styles#PolymerElements/paper-styles#1 - 2 * @bower_components/polymer#Polymer/polymer#^2.0.0 * @bower_components/prism#LeaVerou/prism#* * @bower_components/prism-element#PolymerElements/prism-element#1 - 2 * @bower_components/shadycss#webcomponents/shadycss#^v1.0.0 * @bower_components/sinon-chai#domenic/sinon-chai#^2.7.0 * @bower_components/sinonjs#blittle/sinon.js#^1.14.1 * @bower_components/stacky#PolymerLabs/stacky#^1.3.0 * @bower_components/test-fixture#polymerelements/test-fixture#^3.0.0-rc.1 * @bower_components/web-component-tester#Polymer/web-component-tester#^6.0.0 * @bower_components/webcomponentsjs#webcomponents/webcomponentsjs#^1.0.0

xtal-decorator version 0.0.11
### Dependencies * @bower_components/accessibility-developer-tools#GoogleChrome/accessibility-developer-tools#^2.10.0 * @bower_components/async#caolan/async#^1.5.0 * @bower_components/chai#chaijs/chai#^3.2.0 * @bower_components/font-roboto#PolymerElements/font-roboto#^1 * @bower_components/iron-a11y-announcer#PolymerElements/iron-a11y-announcer#1 - 2 * @bower_components/iron-a11y-keys-behavior#polymerelements/iron-a11y-keys-behavior#1 - 2 * @bower_components/iron-autogrow-textarea#PolymerElements/iron-autogrow-textarea#1 - 2 * @bower_components/iron-behaviors#PolymerElements/iron-behaviors#1 - 2 * @bower_components/iron-checked-element-behavior#PolymerElements/iron-checked-element-behavior#1 - 2 * @bower_components/iron-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0 * @bower_components/iron-flex-layout#polymerelements/iron-flex-layout#1 - 2 * @bower_components/iron-form-element-behavior#PolymerElements/iron-form-element-behavior#1 - 2 * @bower_components/iron-input#PolymerElements/iron-input#1 - 2 * @bower_components/iron-location#PolymerElements/iron-location#1 - 2 * @bower_components/iron-meta#PolymerElements/iron-meta#1 - 2 * @bower_components/iron-validatable-behavior#PolymerElements/iron-validatable-behavior#1 - 2 * @bower_components/lodash#lodash/lodash#^3.7.0 * @bower_components/marked#chjj/marked#~0.3.6 * @bower_components/marked-element#polymerelements/marked-element#1 - 2 * @bower_components/mocha#mochajs/mocha#^3.1.2 * @bower_components/paper-behaviors#PolymerElements/paper-behaviors#1 - 2 * @bower_components/paper-button#PolymerElements/paper-button#^2.0.0 * @bower_components/paper-input#PolymerElements/paper-input#^2.0.2 * @bower_components/paper-ripple#PolymerElements/paper-ripple#1 - 2 * @bower_components/paper-styles#PolymerElements/paper-styles#1 - 2 * @bower_components/polymer#Polymer/polymer#^2.0.0 * @bower_components/prism#LeaVerou/prism#* * @bower_components/prism-element#PolymerElements/prism-element#1 - 2 * @bower_components/shadycss#webcomponents/shadycss#^v1.0.0 * @bower_components/sinon-chai#domenic/sinon-chai#^2.7.0 * @bower_components/sinonjs#blittle/sinon.js#^1.14.1 * @bower_components/stacky#PolymerLabs/stacky#^1.3.0 * @bower_components/test-fixture#polymerelements/test-fixture#^3.0.0-rc.1 * @bower_components/web-component-tester#Polymer/web-component-tester#^6.0.0 * @bower_components/webcomponentsjs#webcomponents/webcomponentsjs#^1.0.0

xtal-decorator version 0.0.12
### Dependencies * @bower_components/accessibility-developer-tools#GoogleChrome/accessibility-developer-tools#^2.10.0 * @bower_components/async#caolan/async#^1.5.0 * @bower_components/chai#chaijs/chai#^3.2.0 * @bower_components/font-roboto#PolymerElements/font-roboto#^1 * @bower_components/iron-a11y-announcer#PolymerElements/iron-a11y-announcer#1 - 2 * @bower_components/iron-a11y-keys-behavior#polymerelements/iron-a11y-keys-behavior#1 - 2 * @bower_components/iron-autogrow-textarea#PolymerElements/iron-autogrow-textarea#1 - 2 * @bower_components/iron-behaviors#PolymerElements/iron-behaviors#1 - 2 * @bower_components/iron-checked-element-behavior#PolymerElements/iron-checked-element-behavior#1 - 2 * @bower_components/iron-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0 * @bower_components/iron-flex-layout#polymerelements/iron-flex-layout#1 - 2 * @bower_components/iron-form-element-behavior#PolymerElements/iron-form-element-behavior#1 - 2 * @bower_components/iron-input#PolymerElements/iron-input#1 - 2 * @bower_components/iron-location#PolymerElements/iron-location#1 - 2 * @bower_components/iron-meta#PolymerElements/iron-meta#1 - 2 * @bower_components/iron-validatable-behavior#PolymerElements/iron-validatable-behavior#1 - 2 * @bower_components/lodash#lodash/lodash#^3.7.0 * @bower_components/marked#chjj/marked#~0.3.6 * @bower_components/marked-element#polymerelements/marked-element#1 - 2 * @bower_components/mocha#mochajs/mocha#^3.1.2 * @bower_components/paper-behaviors#PolymerElements/paper-behaviors#1 - 2 * @bower_components/paper-button#PolymerElements/paper-button#^2.0.0 * @bower_components/paper-input#PolymerElements/paper-input#^2.0.2 * @bower_components/paper-ripple#PolymerElements/paper-ripple#1 - 2 * @bower_components/paper-styles#PolymerElements/paper-styles#1 - 2 * @bower_components/polymer#Polymer/polymer#^2.0.0 * @bower_components/prism#LeaVerou/prism#* * @bower_components/prism-element#PolymerElements/prism-element#1 - 2 * @bower_components/shadycss#webcomponents/shadycss#^v1.0.0 * @bower_components/sinon-chai#domenic/sinon-chai#^2.7.0 * @bower_components/sinonjs#blittle/sinon.js#^1.14.1 * @bower_components/stacky#PolymerLabs/stacky#^1.3.0 * @bower_components/test-fixture#polymerelements/test-fixture#^3.0.0-rc.1 * @bower_components/web-component-tester#Polymer/web-component-tester#^6.0.0 * @bower_components/webcomponentsjs#webcomponents/webcomponentsjs#^1.0.0

xtal-decorator version 0.0.13
### Dependencies * @polymer/polymer#^3.0.0

xtal-decorator version 0.0.14
### Dependencies * xtal-latx#0.0.18

xtal-decorator version 0.0.15
### Dependencies * xtal-latx#0.0.18

xtal-decorator version 0.0.16
### Dependencies * xtal-latx#0.0.18 * xtal-shell#0.0.10

xtal-decorator version 0.0.17
### Dependencies * xtal-latx#0.0.18 * xtal-shell#0.0.10

xtal-decorator version 0.0.18
### Dependencies * xtal-latx#0.0.18 * xtal-shell#0.0.10

xtal-decorator version 0.0.19
### Dependencies * xtal-latx#0.0.18 * xtal-shell#0.0.10

xtal-decorator version 0.0.20
### Dependencies * xtal-latx#0.0.19 * xtal-shell#0.0.10

xtal-decorator version 0.0.21
### Dependencies * xtal-latx#0.0.19 * xtal-shell#0.0.10

xtal-decorator version 0.0.22
### Dependencies * xtal-latx#0.0.22 * xtal-shell#0.0.10

xtal-decorator version 0.0.23
### Dependencies * xtal-latx#0.0.24 * xtal-shell#0.0.10

xtal-decorator version 0.0.24
### Dependencies * xtal-latx#0.0.24 * xtal-shell#0.0.10

xtal-decorator version 0.0.25
### Dependencies * xtal-latx#0.0.26 * xtal-shell#0.0.10

xtal-decorator version 0.0.26
### Dependencies * xtal-latx#0.0.26 * xtal-shell#0.0.10

xtal-decorator version 0.0.27
### Dependencies * xtal-latx#0.0.26 * xtal-shell#0.0.10

xtal-decorator version 0.0.29
### Dependencies * xtal-latx#0.0.47 * xtal-shell#0.0.10

xtal-decorator version 0.0.30
### Dependencies * xtal-latx#0.0.76 * xtal-shell#0.0.10

xtal-decorator version 0.0.31
### Dependencies * xtal-latx#0.0.76 * xtal-shell#0.0.10

xtal-decorator version 0.0.32
### Dependencies * xtal-latx#0.0.76 * xtal-shell#0.0.10

xtal-decorator version 0.0.33
### Dependencies * xtal-latx#0.0.76 * xtal-shell#0.0.10

xtal-decorator version 0.0.34
### Dependencies * xtal-latx#0.0.88 * xtal-shell#0.0.18 * trans-render#0.0.68

xtal-decorator version 0.0.35
### Dependencies * xtal-latx#0.0.88 * xtal-shell#0.0.18 * trans-render#0.0.68

xtal-decorator version 0.0.36
### Dependencies * xtal-latx#0.0.88 * xtal-shell#0.0.18 * trans-render#0.0.68

xtal-decorator version 0.0.37
### Dependencies * xtal-latx#0.0.88 * xtal-shell#0.0.18 * trans-render#0.0.68

xtal-decorator version 0.0.38
### Dependencies * xtal-latx#0.0.88 * xtal-shell#0.0.18 * trans-render#0.0.68

xtal-decorator version 0.0.39
### Dependencies * xtal-latx#0.0.88 * xtal-shell#0.0.18 * trans-render#0.0.68

xtal-decorator version 0.0.40
### Dependencies * trans-render#0.0.78 * xtal-element#0.0.29 * xtal-shell#0.0.18

xtal-decorator version 0.0.41
### Dependencies * trans-render#0.0.78 * xtal-element#0.0.29 * xtal-shell#0.0.18

xtal-decorator version 0.0.42
### Dependencies * trans-render#0.0.94 * xtal-element#0.0.42 * xtal-shell#0.0.18