Some problems are still present with the code. First, if you change the vote property or attribute, it may change the rating property which will result in calling render twice. Despite repeat calls of render essentially being a no-op and efficient, the javascript VM is still spending time calling that function twice synchronously. Second, it is tedious adding new properties and attributes as it requires a lot of boilerplate code. This is where LitElement comes in!
LitElement is Lit's base class for creating fast, lightweight Web Components that can be used across frameworks and environments. Next, take a look at what LitElement can do for us in the rating-element by changing the
Start by importing and subclassing the LitElement base class from the lit package:
<!DOCTYPE html>
<head>
<script src="./index.js" type="module"></script >
<style>
span{
border: 1px solid red;
}
</style>
</head>
<body>
<rating-element></rating-element>
</body>
Your output should have a red border box around the span for the rating. This is a trivial case, but the lack of DOM encapsulation may result in larger problems for more complex applications. This is where Shadow DOM comes in.
Attach a Shadow Root to the element and render the DOM inside of that root:
class RatingElement extends HTMLElement {
constructor() {
super();
this.rating = 0;
}
connectedCallback() {
const shadowRoot = this.attachShadow({mode: 'open'});
}
}
customElements.define('rating-element', RatingElement);
When you refresh the page, you will notice that the styles in the main document can no longer select the nodes inside the Shadow Root.
You should now see an expandable shadow root that holds the contents. Everything inside that shadow root is called the Shadow DOM. If you were to select the rating element in Chrome Dev Tools and call $0.children, you will notice that it returns no children. This is because Shadow DOM is not considered a part of the same DOM tree as direct children but rather the Shadow Tree.
An experiment: add a node as a direct child of the <rating-element>: