[](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 Click me to Order Your Drink 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 Click me to Order Your Drink 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 ```