?? ? ??? ???? ? ?? ??? ???? ??? ??????

? ?? ??? ???? ???? ?? ?? ? ??? ???? ?? ? ? ???, ?? ?? ??? ???? ?? ????? ?????.

?? : ??? HTML ?? ?? ???? ?? ?? ???? ? ?? ??? ???? ? ??????. ??? ???? getAttribute ???? ?? ?? ??? ??? ????? setAttribute ???? ??? ? ????. ??? ?? ????? ???, ???? ?? ? ??? ?? ?? ??? ( "true"?? "false")? ?? ??? ?? ?? ?????.

??? ???? ? ?? ??? ???? ????? HTML???? ?????.

 <code class="html"><my-component data-value="Hello World"></my-component></code>

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

 <code class="javascript">class MyComponent extends HTMLElement { constructor() { super(); const value = this.getAttribute('data-value'); console.log(value); // "Hello World" } }</code>

?? : ??? ? ????? ?? ? ??? ???? ?? ??? JavaScript ?? ?? ? ? ????. ?? ?? ????? ??? ?? ??? ? ? ??? ???? ??? ??? ? ????.

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

 <code class="javascript">class MyComponent extends HTMLElement { constructor() { super(); this._value = null; } get value() { return this._value; } set value(newValue) { this._value = newValue; // Optionally trigger a re-render or other side effects } } // Usage in JavaScript const component = document.querySelector('my-component'); component.value = "Hello World"; console.log(component.value); // "Hello World"</code>

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

 <code class="javascript">class MyComponent extends HTMLElement { constructor() { super(); this._value = null; } set value(newValue) { this._value = newValue; const event = new CustomEvent('value-changed', { detail: { value: newValue } }); this.dispatchEvent(event); } } // Usage in JavaScript const component = document.querySelector('my-component'); component.addEventListener('value-changed', (event) => { console.log(event.detail.value); // Logs the new value });</code>

? ?? ???? ??? ??? ?????? ?? ??? ??????

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

1. ?? ???? ?? ?? : ??? JavaScript ??? ???? ???? ???? ? ? ???? ?? ???? ??????. ?? ?? ??? ??? ????? ?? ?????? ?? ??? ??? ??? ???? ????????.

2. ?? ??? ??? ?????? : ??? ???? ?? ??? ?? ??? ??????. ?????? HTML?? ?? ?? ??? ????? ?? ??????.

3. ??? ??? ??? ?? : ? ?? ???? ???? ?? ??? ?? ???? ????? ?? ???? ???? ??? ??? ???? ??????. ?? ??? ??? ?? ? ? ??? ?? ???? ???? ??? ?? ?? ?? ?? ? ? ????.

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

5. Shadow Dom : Shadow Dom? ???? ?? ??? ??? ???? ????? ?? ????? ????? ?? ??? ??? ?? ???? ?? ???? ?????.

6. ?? ?? ?? : attributeChangedCallback ? ?? ???? ??? ???? ?? ? connectedCallback ?? disconnectedCallback ? ?? ??? ???? ?? ??? DOM? ????? ?? ? ? ???? ?????.

7. ??? ??? ?? ??? ?????. ?? ? ?? ??? ???? ??? ?? ????? ?? ? ?? ??? ??? ?? ?? (Flux ?? Redux ?)? ???? ?? ???? ??? ????? ???? ?? ??????.

8. ?? ??? ?? : ? ?? ????? ??? ? ? ?? ?? ?? ????? ?? ?? ? ? ??? ??? ?? (?? ??? ?? ? ??, ?? ? ???)? ???? ???????.

??? ??? ??? ? ?? ??? ??? ? ??? ???? ??? ?? ? ? ?????

??? ??? ??? ? ?? ??? ??? ? ??? ??? ?? : ? ?? ??? ?????.

1. ??? ??? ?? ?? : ?? ? ?? ??, ??? ?? ? ??? ??? ?? JavaScript ??? ?? ? ? ??????. ??? ???? ??? ?? ??? ???? ??? ??? ?????????.

2. ?? ??? ?? : ???? ???? ?? ????? ???? ?? ???? ?? ??? ?? ? ? ???? ?? ???? ???? ?? ??????. Lodash? ?? ??????? ???? _.cloneDeep ???????.

 <code class="javascript">import _ from 'lodash'; class MyComponent extends HTMLElement { constructor() { super(); this._data = null; } set data(newData) { this._data = _.cloneDeep(newData); } get data() { return _.cloneDeep(this._data); } }</code>

3. ??? ??? ?? ?? : ??? ??? ??? ???? ???? ?? ??? ???? ??? ? ??? ??????. Empable.js? ?? ???????? ?? ? ????.

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

 <code class="javascript">class MyComponent extends HTMLElement { constructor() { super(); this._data = null; } set data(newData) { if (!Array.isArray(newData)) { throw new Error('Data must be an array'); } this._data = newData; } }</code>

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

6. ??? ?? ??? ?? : ??? ???? ??, ?? ?? ???? ????? ???? ???? ???? ?? ??? ?? ??? ??? ??????.

? ?? ???? ???? ???? ?? ?? ? ?? ??? ??? ??????

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

?? :

• ??? ?? : ??? ?? ?????? ???? ?? ?? ??? ???? ???????. ?? ?? ?? ??? ??? ??? ?? ?? ??? ??? ? ????.
• DOM ???? : ?? ??? DOM ????? ??????. DOM ????? ??? ?? ?????? ??? ?? ? ????. ????? HTML? ?? ???? ???????? ?????.
• ? ??? : ?? ??? ?? ??? ????? ??? ?? ( attributeChangedCallback ??) ??? ?? ????? ?? ???? ? ??? ???? ??? ??? ? ? ????.

??:

• ?? ??? : ??? ???? ??? ?? ????? ??? ? ???? ??? ??? ??? ?? ? ????.
• DOM ???? ?? : ??? ????????? DOM ????? ????? ???, ?? ??? ????? ?? ? ???? ? ????.
• ??? : ??? ?? ??? JavaScript ?? ??? ?? ???? ?? ? ? ???? ???? ? ?? ?? ?? ???? ? ????? ?????? ?? ? ? ????.

???? ?? ?? ?? :

• ?? ?? : ?? ??? ??? ???? ?? ?? ?? ??? ??? ? ????. ?? ?? ?? ?? ??? JavaScript ?? ??? HTML?? ?? ??? ? ????.
• ??? ?? : ?? ???? ?? ???? ?? ?? ??? ? DOM ???? ???? ?? ??? ????? ? ??? ????.
• ??? ?? : ??? ??? ??? ??? ?? ? ? ???, ?? ???? ???? ??? ?? ??? ???? ???? ? ????.
• ??? ?? : ???? ?? ??? ??? ?? ???? DOM ????? ??? ??? ?? ? ??? ?? ???? ???? ?? ?? ??? ???? ??? ? ???? ? ????.

????, ??? ?? ?? ? ?? ???? ? ??? ??, ??? ?? ??? ? ??? ??? ? ?????. ?? ??? ??? ?? ????? ?? ?? ??? ???? ???? ??? ?????????.

? ??? ?? ? ??? ???? ? ?? ??? ???? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!