Please enable JavaScript.

Coggle requires JavaScript to display documents.

Web componnets (libs (Slim, Riot.js, LitElement, Smart, X-Tag), consist of…

- - - - useful once you have a part of your HTML that needs to be repeated multiple times
      - possibility of creating a block of HTML and, with the help of JavaScript, add the content to it, clone it and then add it to the DOM.
    - - because no matter how many times you clone the template, add the content to it, and attach it to the DOM
        
        browsers are going to parse the template once :one:
  - - - when you have selected attribute in web componnet
        
        #
        
        #
        
        #
      - observedAttributes
      - constructor
        
        :heavy_check_mark:
        
        setting some initial state
        
        event listeners
        
        creating the shadow DOM
        
        runs whenever an element is created, but before the element is attached to the document
      - registering our element
        
        window.customElements.define('my-element', MyElement)
      - part of HTMLElement interface :diamond_shape_with_a_dot_inside:
        
        callback :diamond_shape_with_a_dot_inside:
        
        connectedCallback()
        
        called when the element is inserted to the DOM
        
        :heavy_check_mark:
        
        run setup code
        
        fetching data
        
        setting default attributes
        
        disconectedCallback()
        
        :heavy_check_mark:
        
        remove any event listeners
        
        cancel interval
        
        called whenever the element is removed from the DOM
        
        adoptedCallback()
        
        called each time the custom element is moved to a new document
        
        :heavy_check_mark:
        
        for <iframe>
        
        attributeChangedCallback(name, oldValue, newValue)
        
        params
        
        name
        
        oldValue
        
        newValue
        
        observe an element's attributes
        
        implementing a static observedAttributes getter
        
        static get observedAttributes() { return ['my-attr'] }
        
        any time the my-attr attribute is changed, the attributeChangedCallback will run
    - - :check:
        
        <my-element>
      - :red_cross:
        
        <myelement>