Fortunately custom element lifecycle callbacks let you know when the component is mounted, unmounted or the attributes change. Note that the inner custom elements do not live in the shadow DOM of the parent as the child has its own shadow DOM. It’s basically private shadow DOMs all the way down unless you specifically create a component to use the regular light DOM.
The custom element lifecycle callbacks include:
connectedCallback(): called each time the element is added to the document. The specification recommends that, as far as possible, developers should implement custom element setup in this callback rather than the constructor.
disconnectedCallback(): called each time the element is removed from the document.
adoptedCallback(): called each time the element is moved to a new document.
attributeChangedCallback(): called when attributes are changed, added, removed, or replaced. See Responding to attribute changes for more details about this callback.
Additionally there are other events that can be listened for:
The slotchange event is fired on an HTMLSlotElement instance ( element) when the node(s) contained in that slot change.
See the following:
