import '@webcomponents/custom-elements';
      
      export default class WebComponent extends HTMLElement {
        wrapper: HTMLElement;
      
        constructor() {
          super();
          this.attachShadow({ mode: "open" }); // sets and returns 'this.shadowRoot'
      
          this.wrapper = document.createElement("div");
          this.wrapper.setAttribute("class", "className");
          this.shadowRoot.append(this.wrapper);
        }
      
        static get observedAttributes() {
          return ["attribute"];
        }
      
        get attribute(): number {
          return this.getAttribute("attribute");
        }
      
        set attribute(val: any) {
          if (val == null) {
            this.removeAttribute("attribute");
          } else {
            this.setAttribute("attribute", `${val}`);
          }
        }
      
        attributeChangedCallback(name: string, oldValue: any, newValue: string) {
          if (name === "attribute") {
            
          }
        }
      }
      
      customElements.define("web-component", WebComponent);
      

      Typescript language logo
      Create WebComponent

      The WebComponent class extends HTMLElement and provides a constructor that sets up some basic attributes for the wrapper element. The get observedAttributes() method returns an array of strings that represent the attributes that are observed by this WebComponent instance. The setAttribute() and attributeChangedCallback() methods are used to manage the attributes of the WebComponent instance.

      When the WebComponent instance is created, it attaches a shadow to the wrapper element using the mode attribute. The shadowRoot is a DOM node that contains the shadow for the WebComponent instance. The get observedAttributes() method returns an array of strings that represent the attributes that are observed by the WebComponent instance. The setAttribute() method sets the attribute value for the attribute named attribute in the shadowRoot. The attributeChangedCallback() method is invoked when the attribute named attribute in the shadowRoot changes its value.

      0 Comments

        Add Comment

        Log in to add a comment

        Codiga - All rights reserved 2022.