To make that a fair comparison Andrew his native code should be refactored to: https://jsfiddle.net/WebComponents/ovtc5wpx/ customElements.define('like-button', class extends HTMLElement {
static get observedAttributes() { return ['liked'] }
get liked() { return this.hasAttribute('liked') }
set liked(state) { this.toggleAttribute('liked', state) }
constructor() {
super().attachShadow({ mode:'open' });
}
attributeChangedCallback() {
this.connectedCallback();
}
connectedCallback(){
this.onclick = (evt) => this.liked = !this.liked;
this.shadowRoot.innerHTML = this.liked ? '<b>You liked this!</b>' : `<button>Like</button>`;
}
});
Now, a shadowRoot is a bit wasteful here, as inheritable styles *will* style shadowDOM.So we remove shadowDOM: customElements.define('l1ike-button', class extends HTMLElement {
static get observedAttributes() { return ['liked'] }
get liked() { return this.hasAttribute('liked') }
set liked(state) { this.toggleAttribute('liked', state) }
attributeChangedCallback() {
this.connectedCallback();
}
connectedCallback(){
this.onclick = (evt) => this.liked = !this.liked;
this.innerHTML = this.liked ? '<b>You liked this!</b>' : `<button>Like</button>`;
}
});
To do that in Lit, you actually have to *ADD CODE* createRenderRoot() {
return this;
}
Making the Lit code LONGER than the Native code import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';
@customElement('like-button')
class LikeButton extends LitElement {
@property({type: Boolean, reflect: true})
liked = false;
render() {
return this.liked ? 'You liked this.' : html`<button @click=${() => this.liked = true}>Like</button>`;
}
createRenderRoot(){
return this;
}
}
In real live projects you won't be nitpicking about these bytes and the 6K library/BaseClass Lit adds. Or the 7K lit-element.Or would you? When those bytes are added for each! component if you develop truly self-contained web components... Most Web Component Developers are still building Apps _with_ Components, not Apps _made of_ Components. When doing Native you will *ofcourse* develop your own *BaseClass* (like Lit is)
And for 95% of your time you will just be doing Plain Old JavaScript code. Most Litters don't have a clue what is going on under the hood. Most Native developers just silently do everything native, they are not the type to evangelize their choice on Social Media. Their code will run without any issues, upgrades, or breakin changes, for the next 25 JavaScript years |