tjb-webcomponent
v0.3.1
Published
Dead Simple helper Class for creating HTMLElements (native WebComponents)
Downloads
10
Maintainers
Readme
tjb-webcomponent
Dead Simple helper Class for creating HTMLElements (native WebComponents).
Benefits
Take away amount of boilerplate to create:
- ShadowDom combining CSS & HTML nodes
- Add getters and setters to watched attributes:
So for each attribute
myClass.foo = 'bar'
will work the same asmyClass.setAttribute('foo', 'bar')
Add to project
You might want to use a Polyfill for WebComponent:
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js"></script>
Include via HTML
Include it:
<script
src="https://tjb-webcomponents.github.io/tjb-webcomponent/tjb-wc.min.js"
type="module"
></script>
Include via JavaScript
import WebComponent from 'https://tjb-webcomponents.github.io/tjb-webcomponent/tjb-wc.min.js'
Include via NPM
Console:
npm i -S tjb-webcomponent
Then in your code:
import WebComponent from 'tjb-webcomponent'
Useage
When defining your WebComponent, instead of extending HTMLElement
just extend WebComponent
like so:
class MyClass extends WebComponent() {
// do something here
}
That’s it. You’re ready to use the WebComponent helper like so:
- Mixin with a specific custom element:
class MyClass extends WebComponent(HTMLInputElement) {
// do something here
}
customElements.define("my-class", MyClass, { extends: 'input' });
// <!-- can now be used like this -->
<input is="my-class">
Keep in mind, that most native elements do not have a shadow dom, thus the rendering might not work.
- With any html template tool
class MyClass extends WebComponent() {
// CSS
////////////////////////////////////////////////////////////
CSS() {
return html`
<style>
.orange {
color: orange;
}
.blue {
color: blue;
}
</style>
`;
}
// Markup
////////////////////////////////////////////////////////////
HTML() {
return html`
<div class="orange">I’m an orange text</div>
`;
}
// Attribute Handling
////////////////////////////////////////////////////////////
static get observedAttributes() {
return ['color']
}
handleColorChange(newValue, oldValue) {
this.domNode.className = newValue;
}
// Logic
////////////////////////////////////////////////////////////
connectedCallback() {
super.connectedCallback();
// do your own stuff
}
}
// Useful methods:
this.reRender() // Redraw/Replace the whole component (only if it is connected)
customElements.define("my-class", MyClass);
Now you can use it just as any other Web Component:
<my-class></my-class>
You would be able to change the color for instance like so:
const node = document.querySelector('my-class'); // get the node if you don’t already have it
node.color = 'blue'; // will call handleColorChange and add the class 'blue'
// this is equivalent to node.setAttribute('color', 'blue')
// or also <my-class color="blue"></my-class>