Starting code

my-element.js

{% include projects/try/style/before/my-element.js %}

{% include project.html folder="try/style/before" openFile="my-element.js" %}

Editing steps

Add a style block to the element template in render:

my-element.js

render(){
  return html`
    <!-- Add a style block here -->
    <p>${this.message}</p>
    ...
    ...
  `;
}

Style block

<style>
  p {
    font-family: Roboto;
    font-size: 24px;
    font-weight: 500;
  }
  .red {
    color: red;
  }
  .blue {
    color: blue;
  }
</style>

Apply the class styles to a paragraph in the element template. Use myBool to apply the styles conditionally.

my-element.js

render(){
  return html`
    ...
    <!-- Style this text --> 
    <p>style me</p>
    ...
  `;
}

Apply the styles conditionally

<p class="${this.myBool?'red':'blue'}">style me</p>

Completed code

my-element.js

{% include projects/try/style/after/my-element.js %}

{% include project.html folder="try/style/after" openFile="my-element.js" %}

Congratulations - you've made your first element with LitElement.

Next steps