xtal-in - Vaadin Add-on Directory

[](https://www.webcomponents.org/element/bahrus/xtal-in) # \ \ is a vanilla-ish custom element that generates events with semantically meaningful, and even unique, discoverable event names. The -in- in xtal-in- refers to an "input channel" -- which can be a clickable dom element, for example, or more abstract things like attributes changing. In the [groundbreaking blog post "Custom Elements That Work Anywhere"](http://robdodson.me/interoperable-custom-elements/), Rob Dodson blegs: > **In general, don't bubble events unless they are semantically meaningful.** For example, *changed* is not a very semantically > meaningful event, whereas *document-opened* would be. Non-semantic events can leak up and another element may accidentally handle them. Adding an event listener to an element, whose sole purpose is to bubble the event up with a different name, is a rather insulting task for the powerful and sophisticated JavaScript language to handle. JavaScript should only be bothered with important stuff, like reinventing the browser in an immutable abstraction layer that can time travel recursively. ```html

... How did I get here? ...

``` By default, xtal-in blocks the original event from propagating is optional, and prevents the event from propagating. Adding "noblock" allows the original event to propagate normally. Note that we specify whether this new semantically meaningful event should bubble and/or escape the shadow DOM cocoon ("composed") You can also specify a test on the element spawning the event, using the if-matches attribute, which uses matches() [under the hood](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches): ```html

... My God! What have I done? ...

``` ## Monitoring Attribute Changes In addition to listening for click or input events, one can listen for attribute change events: ```html ``` ## Install the Polymer-CLI First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally. ## Viewing Your Element ``` $ polymer serve ``` ## Running Tests WIP

xtal-in version 0.0.7
### 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-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0 * @bower_components/iron-flex-layout#polymerelements/iron-flex-layout#1 - 2 * @bower_components/iron-location#PolymerElements/iron-location#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/poly-prep#bahrus/poly-prep#^0.0.9 * @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-in version 0.0.8
### 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-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0 * @bower_components/iron-flex-layout#polymerelements/iron-flex-layout#1 - 2 * @bower_components/iron-location#PolymerElements/iron-location#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/poly-prep#bahrus/poly-prep#^0.0.9 * @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 * fs-extra#^4.0.2

xtal-in version 0.0.15
### 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-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0 * @bower_components/iron-flex-layout#polymerelements/iron-flex-layout#1 - 2 * @bower_components/iron-location#PolymerElements/iron-location#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/poly-prep#bahrus/poly-prep#^0.0.9 * @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 * fs-extra#^4.0.2

xtal-in version 0.0.17
### 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-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0 * @bower_components/iron-flex-layout#polymerelements/iron-flex-layout#1 - 2 * @bower_components/iron-location#PolymerElements/iron-location#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/poly-prep#bahrus/poly-prep#^0.0.9 * @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 * fs-extra#^4.0.2

xtal-in version 0.0.1
### Dependencies * xtal-latx#0.0.44

xtal-in version 0.0.18
### Dependencies * xtal-latx#0.0.44

xtal-in version 0.0.19
### Dependencies * xtal-latx#0.0.44

xtal-in version 0.0.20
### Dependencies * xtal-latx#0.0.44