sample custom element

import { PolymerElement, html } from "@polymer/polymer/polymer-element.js";

import "@polymer/polymer/lib/elements/dom-if";
import "@polymer/polymer/lib/elements/dom-repeat";

class SampleCustomElement extends PolymerElement {
  static get template() {
    
    // anything inside this template literal string gets appended to the dom as html
    return html`
      <style include="shared-styles">
        // :host is a feature of web components that is sort of a doorway between the local shadow dom and the parent's dom
        // anything in the shadow dom (other than host) has no affect on anything outside the shadow dom
        // nothing outside the shadow dom affects anything inside the shadow dom
        :host {
          display: block;
          padding: 10px;
        }
        
        // All other CSS works as normal css does
        .red-text {
          color: red;
        }
      </style>
      
      <div class="red-text">This text will be red</div>
    `;
  }
  // javascript stuff goes after this line
}

// registers the custom element we just created with the browser
window.customElements.define("sample-custom-element", SampleCustomElement);











// In some other html file, this will add the html and styling to the file.

<div id="redTextContainer">
  <sample-custom-element></sample-custom-element>
</div>

// So it's essentially the same as saying
<div id="redTextContainer">
  <div style="color: red">This text will be red</div>
</div>