My Custom Elements Reusable Bits
I have extended HTMLElement as HTMLElementPlus
to contain the bits of functionality I keep reimplementing.
There is an example usage in the HTML file below. And a Glitch here: Edit on Glitch
Attribute Callbacks
class MyEl extends HTMLElementPlus {...
Provides a callback when all attributes have been parsed, rather than one-by-one. allAttributesChangedCallback
useful for waiting to handle all at once.
allAttributesChangedCallback
gets called with an object with parsed attributes.
The parser can be set by setting the function static parseAttributeValue(name, value)
in the class.
Default attribute values can be provided by setting the static defaultAttributeValue(name)
function, so you can provide sensible fallback values.
Query the shadow dom by reference
E.g. an element in the shadow dom: <span ref="foobar"></span>
can be queried using this.refs.foobar
;
Easy event firing.
Fire an event using this.emitEvent('event-name', {foo: 'bar'});
This can be listed for using, el.addEventListener
;
This comment has been minimized.
rafegoldberg commentedFeb 12, 2018
@AdaRoseCannon this was an enlightening read; thanks for the code!