web-component-with-props.js

const templateItem = document.createElement('template');
templateItem.innerHTML = `
<div>
    <h1></h1>
</div>
`;

class TodoApp extends HTMLElement {
    constructor() {
        super();
        this._shadowRoot = this.attachShadow({ 'mode': 'open' });
        this._shadowRoot.appendChild(templateItem.content.cloneNode(true));
        this.displayName = this._shadowRoot.querySelector('h1');
        this.displayName.innerText = "test"
    }

    attributeChangedCallback(name, oldValue, newValue) {
        console.log(this.name)
        this.displayName.innerText = this.name;
      }

    static get observedAttributes() {
        return ['name'];
      }
    
      get name() {
        return this.getAttribute('name');
      }

      set name(newValue) {
          console.log(newValue)
        this.setAttribute('name', newValue);
      }
}

window.customElements.define('web-card', TodoApp);