Web ?? ??? ConnectedCallback, DisternectedCallback, AttributeChangedCallback ? ?? ? Callback ??? ??? ??? ???? ??????.

? ?? ???? ???? ??? ????? ??? ???? ?? ??? ??? ???? ? ?????. ? ??? ?? ??? ??? ????.

1. ConnectedCallback () :

   • ? ??? ??? ?? ??? DOM? ?? ? ??? ?????. ?? ??? ?? ??? ????? ??? ?? ??? ? ??? DOM ??? ????? ?? ?????.
   • ??? DOM ??? ???? ?? ? ?? ? ? ????.

2. DistronnectedCallback () :

   • ? ??? ??? ?? ??? DOM?? ?? ? ??? ?????. connectedCallback ? ??? ??? ?? ??? ???? ???? ? ?????.
   • ??? ?? ?? ??? ?? ???? ???? ?????? ??? ??? ???? ? ?????.

3. AttributeChangedCallback (Attrname, Oldval, Newval) :

   • ? ??? ??? ?? ? ??? ??, ?? ?? ???? ?????. ?? ??? ??? ??? ???? ? ? ????.
   • ? ??? ????? observedAttributes ?? getter? ???? ?? ? ??? ???????.

4. ?? callback (OldDocument, newDocument) :

   • ? ???? ??? ?? ??? ?? ??? ????? ?? ??? ?? ?? ?? ?? ??? ??? ??? ? ?????.
   • ? ????? ????? ?? ?? ?? IFRAME ????? ??? ????? ?? ? ? ????.

? ?? ??? ConnectedCallback ????? ?? ?? ??? ????????

connectedCallback ???? DOM? ???? ? ?? ??? ????? ? ??????. ?? ???? ?? ???? ??? ?????.

1. ?? ?? ?? :

   • ?? ?? ?? ??? ?? ???? ???? ?? ??? ?? ??? ??????.

2. DOM ?? :

   • ?? ?? ??? DOM ??? ????? ?????. ???? ?? ??? ??? Dom? ????? ?? ??? ???? ?? ??? ? ????.

3. ??? ??? :

   • ??? ???? ?? ?? ?? ?? ??? ??????. ?? ??? ?? ??? ????? ?? ???? ???? ? ?????.

4. ?? ??? ?? ?? :

   • ?? ??? ?? ?? ?? ???? ??? ?? ?? ?? ?? API? ???? ?????.

5. ??? :

   • HTML? ????? ?? ??? InnerHTML? ?????? ?? ??? ??? ?? ??? ????? ??????.

connectedCallback ?? ?? ? ??? ??? ?? ??? ????.

 <code class="javascript">class MyComponent extends HTMLElement { constructor() { super(); // Create a shadow root this.attachShadow({ mode: 'open' }); } connectedCallback() { this.shadowRoot.innerHTML = ` <div> <h1>Hello, World!</h1> </div> `; // Add event listener this.shadowRoot.querySelector('div').addEventListener('click', () => { console.log('Component clicked!'); }); } }</code>

? ?? ?? ??? ??? ???? ? ??? AttributeChangedCallback ??? ?? ? ? ?????

attributeChangedCallback ???? ? ?? ??? ??? ??? ?????? ? ?????. ? ??? ????? ????? ??? ???????.

1. ?? ? ?? ?? :

   • observedAttributes ?? getter? ???? ?? ??? ???? ???? ??? ??????.

2. AttributeChangedCallback ?? :

   • ? ???? ?? ??? ??? attrName , oldVal ? ? ? ?? ??? ???? ? ?? ?? ?? newVal ?????.

3. ??? ?? :

   • attributeChangedCallback ????? ??? ?? ?? ???? ?? ??? ?? ?? DOM? ?????? ?? ??? ??? ? ????.

??? attributeChangedCallback ???? ??? ????.

 <code class="javascript">class MyComponent extends HTMLElement { static get observedAttributes() { return ['name', 'age']; } attributeChangedCallback(name, oldValue, newValue) { if (name === 'name') { this.shadowRoot.querySelector('h1').textContent = `Hello, ${newValue}!`; } else if (name === 'age') { this.shadowRoot.querySelector('p').textContent = `Age: ${newValue}`; } } connectedCallback() { this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = ` <h1>Hello, World!</h1> <p>Age: 0</p> `; } }</code>

? ??? ?? ??? Shadow Dom ?? ?? ??? ??? ??? ?????? name ? age ??? ??? ?????.

? ?? ???? ?? ? Callback ???? ?? ?????? ???????

adoptedCallback ???? ?? ??? ? ???? ?? ??? ???? ? ?? ???? ??????. ??? ?? ?????? ??? ? ????.

1. ?? ?? :

   • ?? ??? ???? ??? ???? ?? ??? ?? ? ??? ??? ?.

2. iframe ?? :

   • ?? ??? ?? ???? iframe ?? ? ??? ?? ? ??.

3. ???? ?? :

   • ???? ???? ?? ??? ?? ???? ? ?? ??? ??? ? ????.

4. ??? ?? ??? ?? :

   • ???? ?? ?? ??? ?? ??? ???? ?? ???? ?? ??? ???? ?? ?? ?.

5. ?? ?? ?? ???? :

   • ?? ?? ? Windows? ???? ?? ?????? ?? ??? ?? ?? ??? ??? ? ????.

??? adoptedCallback ???? ??? ????.

 <code class="javascript">class MyComponent extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); } connectedCallback() { this.shadowRoot.innerHTML = '<h1>Hello, World!</h1>'; } adoptedCallback(oldDocument, newDocument) { console.log('Component moved from:', oldDocument.URL); console.log('Component moved to:', newDocument.URL); // Perform any necessary actions when the component is moved } }</code>

? ???, adoptedCallback ?? ??? ??? ? ?? ?? ? ? ??? URL? ???? ??? ????? ?? ??? ??? ?? ? ? ????.

? ??? Web ?? ??? ConnectedCallback, DisternectedCallback, AttributeChangedCallback ? ?? ? Callback ??? ??? ??? ???? ??????.? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!