Write your HTML
Now that our element is set up and our dev server is running, let's take advantage of the slot and shadow root to make our element a bit more interesting.
We'll edit the
pfe-cool-element.ts file to add some HTML to our element's template. LitElements define their template in the
render() method can return a string, a number, a DOM node, etc, but usually it returns a
TemplateResult, which is an
tagged template literal.
pfe-cool-element into a profile element that has a profile photo, a username, and a button to follow the user.
Here's the updated
render() method in
We'll also need to update
so that the user's name is passed into the slot that we added in
<link rel="stylesheet" href="/elements/pfe-cool-element/demo/demo.css"/>
Slots take the HTML from the light DOM and project it into the shadow DOM at a given location. To learn more about shadow DOM and how to use slots, check out Shadow DOM v1: Self-Contained Web Components.
Here's how it should look in the browser:
Remember that any changes we make in the element directory are watched while the
npm run dev command runs.
When you save changes, the dev server reloads the page and shows you your changes automatically.
Now that we've added the HTML, let's style our element by updating the SASS file.