<xtal-in> is a vanilla-ish custom element that generates events with semantically meaningful 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", 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.
...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:
......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:
Install the Polymer-CLI
First, make sure you have the Polymer CLI installed. Then run
polymer serve to serve your element locally.
Viewing Your Element
$ polymer serve