? ? ?? ? ????? ???? ??? ?? ??? JavaScript ??? ??? ???? ??? ???? ????. ??, ??, vue, ??, ??? ? ?? ??? ??????. ??? ??? ?? ?? ?? ? ? ?? ????? ? ? ??? ??, ?, ?? ?? ? ?? ??? UI ?? ??? ?? ????? ????. ?? ????? ?? ????? ??? ??? ??? ??????? ??? ?? ?? ??????? ?? ??????? ????. ?? vue. ?? ?????. ?.

??? ??? UI ?? ??? ??? ?? ?? ???? ? ? ?? ? ?? ??? ???? ??? ? ? ??? ? ?? ? ????? ?? ?? ????! ??? ??? ? ? ????. ? ?? ??? ?????. ? ???? ??? ??? ????.

?? ? ?? ??? ?? SSR ???? ?? ?????. DSD (Declarative Shadow Dom)? ? ???? ??? ?? ? ????? ?????,? ?? ?? ???? Next, Remix ?? Sveltekit? ?? ???? ?????? ??? ??? ????? ????. ??? ???? ???? ??, DSD? ?? ??? ??????. ??? ??? ??? SSR? ???? ?? ???? ?? ?????.

??, ?? ??

? ?? ??? ????? ?? ???? ??? ???? HTML ?????. ??? CSS ?? (CSS-Tricks) (Caleb Williams? ???? ???? John Rhea? ???? ??? ??)?? ???? ????? ??? ? ??? ??? ?? ?????. ????? JavaScript ???? ???? HtmlElement?? ???? ?? ? ?? ??? ????? ??, ?? ? ???? ???? ?? ????? ??? ? ?? ?? ?????.

?? ?? ??? ???? ?? ??? ?? HTML ??? ?? ? ??? ?? ?? ????. ???? ??? ?? ?????. JavaScript ??? ??? ????? ????? ?? ??? JavaScript ??? ??? ?? ??? ? ??? ?? ?????. ?? ???? ?? ?? ?? ?? ??? ??? ?? ???? ???? ?? ?? ?? ??? ??????. ? ?? ??? React ?? ??? ????? ??? ??? ??? ? ?? ??? ???? ????.

? ?? ??? ?? ? ?? ?? ? ?????. ? ?? ?? ? ?? ?? ???? ????? ??????. ??? ?? ??? ?? ?? UI? ????? ?? ?????. ??? ?? ?? ??? ??? ???? ?? ??? ???? . ??? ??, ???? ?? ? - ?? JavaScript ??? ??? ??? ?? ??? ???? ???? ???? ??? ??? UI ???? ????.

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

??? ?? ??? (??? ????) ???? ?????? ?? ?? ?? ??? ???. ??? ????? ??? ??? ??? ????? ???? ??? ?? ??? ???? ???????? ?? ????? ??? UI? ???? ?? ?????. ??? Base64? ???? ?? ? ??? ???? ????? ?? ???????? ?? UI???? ???? ?? ?????. ?? Blurhash?? ??? ???? ???? ?? ??? ????? ???? ?? ?????.

? ???? ?? ????? ???? React ?????? ???? ??? ???????. ? ???? ? ?? ???? ?? ????? ???? JavaScript ??? ???? ??? ??? ??? ?????.

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

? ???? ?? ?? ???? ??? ? ?? ??? ?????. ?, ???? ??? ???? ??? ?? ??? ????? ????. Lit ?? Stencil? ?? ??? ? ?? ??? ????? ?? ????? ??? ????? ???? ???? ? ??? ? ????. ?? ??? ??? ????? ?????! ???? ?????? ?? ???? ???? ?? ? ????? ??? ?? ? ?? ???? ?????.

??? ??? ?? ??

JavaScript ?? ??? ???? "Hello World"? ??? ??? : ???. ??? ?? ? ?? ????? ??? ??????. ???? ????? ??? ?? ??? ? ?? ??? ? ? ????.

? ?? ??? ???? ?? ? ?? ??? htmlelement?? ???? JavaScript ???? ??? ????.

 ??? ???? htmlelement {}? ?????.

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

 if (! customElements.get ( "Counter-WC")) {
  CustomElements.define ( "Counter-WC", Counter);
}

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

 <counter-wc> </counter-wc>

??? ? ??? ?? ?? ??? ? ?? ??? ??? ??? ?? ???? ????. ??? ???? ???? ??? ConnectedCallback?? ? ?? ??? DOM? ?? ? ? ?????. ???? ??? ???? ??? ???? ??? ? ? ????. ??? htmlelement? JS ??? ?????. ?, ?? ?? ?? ? ?? ?? ???? ????, ?? ?? ?? ???? ?? ???? DOM ?? ??? ????.

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

 ??? ???? htmlelement {
  ConnectedCallback () {
    this.innerhtml = "<div style="'color" : green> hey </div>";
  }
}

if (! customElements.get ( "Counter-WC")) {
  CustomElements.define ( "Counter-WC", Counter);
}

… ? ?????.

?? ??? ??

???? ??? ???? ??? ???. ?? ?? ?? ????? ???? ?? ???? ? ?????. ???? ???? ???? ??? ? ?? ??? ??? DOM??? ? ?? ? ????.

 ??? () {
  ???();
  const ???? = document.createElement ( 'div');

  this.valspan = document.createElement ( 'span');

  const icrement = document.createElement ( 'button');
  ?? .innerText = '??';
  increment.addeventListener ( 'click', () => {
    ???#value = this.#currentValue 1;
  });

  Container.appendChild (this.valspan);
  container.appendChild (document.createElement ( 'br'));
  ????. AppendChild (??);

  this.container = ????;
}

ConnectedCallback () {
  ?. AppendChild (this.container);
  this.update ();
}

?? DOM ??? ?? ??? ????? InnerHTML? ????? ? ?? ?? ???? ?? ???? ? ? ??? ??? ??? ???? ??? ? ?? ?? ????? ?? ??? ?? ? ? ????. ?? ???? ?? ?? ????? ????. ?? ?? Lit ?? Stencil? ?? ? ?? ?? ??? ??? ??? ? ????. ???? ???? ?? ?? ???? ??? ????.

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

 #currentValue = 0;

set #Value (val) {
  #currentValue = val;
  this.update ();
}

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

?? ??? ?? _value?? ?????. ??? ????? ???? ?? :

 ????() {
  this.valspan.innertext = this.#currentValue;
}

?????!

??? ??? ??? ????? ??? ????. ??? ?? ??? ?? ?? ?? ????. ?? ???? Lit ? Stencil? ?? ????? ? ???? ???? ???????.

? ?? ??? ?????

? ???? ? ?? ??? ?? ?? ???? ????. ??? ?? API? ??? ???? ??? ?? ????. ??? ??? ?? ? ??? ?? ?? ????. ? ???? ??? ??? ????. ?? ??? ?? ???? ???? JavaScript ??? ??? ?? ? ?? ??? ??? ???? ? ?? ??? ??? ?? ??? ?? ??? ??? ??? ??? ???? ????.

?? ?? ??? ? ?? ??? ?? ???? ???. ??? ?? ??? ???? ?? ?? ??? ????????. ?? ?? ??? ??????????. ???? ? ?? ??? ???? ? ?? 2, 3, 4 ?? ? ? ????. ??? ??? ?? ??? ???? ?? Svelte Sandbox?? ? ???? ??? ?????. ??? ??? ?? ? ????.

??? ??? ? ?? ??? ???? ?? ??? ???????. ? ?? ??? ??? ???? ????? ? ?? ??? ???? ?? ? ?? ??? ???? ??? ???? ?? ?? attributes ??? ?????.

 ?? ?? attributes = [ "??"];

?? ?? AttributeChangeCallback ??? ??? ???? ?? ? ? ????. ?? ?? ? Attributes? ??? ??? ????? ???? ? ??? ?????.

 AttributeChangedCallback (??, OldValue, NewValue) {
  if (name === "color") {
    this.update ();
  }
}

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

 ????() {
  this.valspan.innertext = this._currentValue;
  this.valspan.style.color = this.getAttribute ( "color") || "???";
}

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

 ?? = 1;

???? ?????.

Svelte?? ??? ?? ?? ??

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

 <cript>
  ?? = "???"???;
????>


  ?? {
    ??? ?? : ??;
  }
???>


  <bind : value="{color}">? ??????
     ??? ??>
     ?? ??>
     blue ??>
  ??>

   
</bind></cript>

??? ??? ?????! ???? ???, ?? ? ?? ??? ??? ???????. ?????, ??? Svelte ????? ?? ??? ????? ?? ???? Svelte? ?? ? ?? ?? ?????? setattribute? ???? ?? ??? ?????. ???? ??? ?? ???? : ??? HTML ??? ??? ?? ???? ?? ????.

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

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

 ?? = 1;
wcinstance???;

??? ?? ??? ??? 1 ?? 2? ?? ? ? ????.

  ?? = 1}> ?? 1 
 ?? = 2}> ?? 2 

??? ?????? ? ?? ??? ?? ????? ???????. ??? ??? ???? ??? ??? ?? ? ??? ???? ?? ????. Svelte? ???? ??? ??? :? ?? :

 <coun><p> ?? Svelte ????? ?? ??? ?? ??? ?? ??? ?? ?? ? ?? ?? ??? ?????.</p>
<pre rel="JavaScript" data-line=""> $ : {
  if (wcinstance) {
    wcinstance.increment = ??;
  }
}

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

??? ??? ?? ???? ?? ? ?? ?? ?? ??? ??? ??? ???? ?? ????. ??? ?? ?? ?? ??? ???? ??? ? ?? ??, ?? ??? ????? ? ?? ? ? ??? ?? ????? ?? ??, ?? wcinstance ??? ???? ??? ? ??? ??? ??? ? ??? ?? ????.

 <coun><p> ??? ? ??? ??? ??????. ? ??? ?????. Svelte? ??? ?? ?? ?? ??? ?????. ? ???? ??????. ??? ?? ?? JavaScript ??? ??? ?? ?????.</p>
<p> ???? ? ? ?? ??? ??? ???? ?? ??? ?? ?????? ? ?? ?? : ??? ?? ??? ????? ???? ?? ????, ?? ?? ??? ?? JavaScript ??? ???“??”????? ?????. ??? ?? ? ??? ? ?? ?? ?? ??? ???? ?? ??? ??? ??? ????.</p>
<h3> React? ?? ?????</h3>
<p> ??. ????? ?? ???? JavaScript ??? ??? ? ?? ???? ?? ?? ??? ???? ????. ??? ??? ??? ? ??? ?????. ?????, ??? ??? React? ?? ??? ???? ??? ?? ??? ? ?? 18?? ???? ?????. ?, ??? ??? ?? ??? ?? ? ? ????. ??? ??? ??? ??? ?? ?? ? ? ????.</p>
<p> ?? ???? Ref? ???? ? ?? ?? ????? ?? ?? ?? ?? ? ? ???? ???? ????. ??? ?? ????.</p>
<pre rel="JSX" data-line=""> import React, {usestate, useref, useeffect} '??'react ';
import './counter-wc';

???? ?? ?? app () {
  const [??, setIncrement] = usestate (1);
  const [color, setColor] = usestate ( 'red');
  const wcref = useref (null);

  useeffect (() => {
    wcref.current.increment = ??;
  }, [??]);

  ?? (
    <div>
      <div classname="ycrement-container">
         setIncrement (1)}> 1  ??
         setIncrement (2)}> 2  ??
      </div>

       setColor (e.target.value)}>
         ??? ??>
         ?? ??>
         blue ??>
      ??>

      <coun>
  );
} ??? ??<p> ??? ?????, ?? ? ?? ?? ??? ?? ???? ???? ?? ??? ?? ? ? ????. ??? ??? ? ?? ??? ?? ??? ?? ???? ????.</p>
<h4> ?? 1 : ?? ??? ??? ??????</h4>
<p> ??? ??? ????. ?? ?? ??? ???? ?? ??? ???? ??? ??? ???? ???????. ???? ?? ?? ?? ? ? ????? ????, ???. ?? ?? ??? ? ? ????. ??? ??? ??? ???, ???? ????? ?? ?? ? ??????. ??? ?? ??? ???? ??? ?? ? ? ????. ??? json stringify/parse ??? ? ?? ????. ??? ?? ??? ??? ? ?? ??? ??????, ? ???? ??? ??? ?? ????.</p>
<h4> ?? 2 : ??????</h4>
<p> ?? ??? ???? ??? ???? ??? ??? ? ??? ??? ?? ???? (?? ?? ??? ??? ??? ????). ? ??? ???? ??? ?? ???? ?????. ???? ??? ????? Lit ???? ??? ???? ??? ???? ??? ????. ? ?????? ? ?? ??? ?? ? ? ??? React ?? ??? ???? ??? ??? ?????. ?????, ??? ???? ?? ????.</p>
<p> ???? ?? ? React ?? ??? ?? ? ?? ??? ??? ???? ??, ?? <em>??</em> ?? ?? ? ?? ?? <em>?? ???</em> ?? ??? ??? ?? (Coun ? ???? ???? ??????. ?? ????? ?????? ???? ??? ?? ???????. ????!</p>
<p> ??? ??? ???? <em>???</em> ???.</p>
<pre rel="HTML" data-line=""> <wcwrapper wctag="Coun

WCTAG? ? ?? ?? ?? ?????. ???? ??? ??? ??? ?????.

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

 import React, {CreateElement, useref, uselayouteffect, memo}? 'React';

const _wcwrapper = (props) => {
  const {wctag, children, ... restprops} = props;
  const wcref = useref (null);

  uselayouteffect (() => {
    const wc = wcref.current;

    for (const.
      if (wc? ?) {
        if (wc [key]! == value) {
          wc [key] = ?;
        }
      } ? ?? {
        if (wc.getAttribute (key)! == value) {
          wc.setattribute (?, ?);
        }
      }
    }
  });

  return createElement (wctag, {ref : wcref});
};

???? const wcwrapper = ?? (_wcwrapper);</wcwrapper>

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

 return createElement (wctag, {ref : wcref});

??? ?? ???? ???? ??? ??? ?????. ???, ??? JSX? ????? ??? ??? ???? ????. ??? ?? div? CreateElement ( "div") ??? ?????. ??? ??? ??? API? ?? ?? ? ??? ??? ??? ? ??? ????.

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

? ??? useeffect ?? UselayoutEffect? ????? ????? ???? ????? ?? ??? ????? ?? ??????? ?????. ?? UselayoutEffect? ?? ??? ??? ????. ??? ??? ?? ??? ??? ????? ???? ??? ?? ?????. React? ?? ?? ????? ??? ?? ??? ??? ?? ? ? ????. ?? ?? ?? React.Memo? ??? ??? ?????. ??? ????? ?? ??? React.purecomponent???. ?, ?? ??? ?? ?? ? ???? ??? ???? ? ??????. ??? ?? ??? ?? ????? ?????.

??? ??? ??? ? ???? ?? ?? ?????? ?? ??? ???? ?? ????? ???? ???? ????. ??? ??? ?? React ?????? ?? ???? ??? ???? ?? ????.

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

 <wcwrapper wctag="Coun

?????, ? ?? ?? ?? ??? ?? ??? ???? ?? ???? ?? ?? ?? ?? @lit-labs/react ???? ???? ? ? ?? ??? ?? ??? ?? ?? ?? ??? ????. ??? ??? ???? ??? ?? ?? ?? ????? ?????. ??? ? ??? ???? ? ?? ??? ?? ?? ??? ????. ?? ??? ?? ??? ?? ???? ?? ??? ??? ? ?? ?? ??? ???? ?? ??? ??? ? ????.

 <wcwrapper wctag="Coun

… ??? :

 <coun><p> ??? ????? ????? ?? ?? ?? ??? ??? ?? <wcwrapper>? ??? ??? ?? ????. ???, ???? : ??? ??? ??? ??? ????? ????.</wcwrapper></p>
<h3> ??</h3>
<p> ?? ????. ?????, ??? ?? ??? ??? ????? ??? ??? ???? ??? ?? ?? ? ?? ??? ???? JavaScript ??? ???? ??? ? ????? ?? ????. React? ??? ?? ?? ??? ??? ?? ?? ??? ??????. ??? ?? ??? ? ?? ??? ??? ??? ?? ??? ???? ??? ?? ??? ??? ?? ? ???? ????.</p>
<p> ??? ?? ? ?? ??? ?? ??? ???? ??? ?? ????. ????? ??? ??? ???? ??? ????. ?? ?? ???? 3 ?? ????? ??? ?? ?? ???? ? ?? ? ??? ?? ? ????. ? ?? URL? ?? ????? ????? ? ? ??? DevTools ???? ??? ??? ????? ??? ???? ?? ? ? ????.</p>
<details><summary> ?? ???????</summary><pre rel="View full code" data-line=""> ??? ? ?? ?? htmlelement {
  ?? ?? attributes = [ 'url'];

  AttributeChangedCallback (??, OldValue, NewValue) {
    if (name === 'url') {
      this.createmainimage (newValue);
    }
  }

  ???? ?? (val) {
    this.previewel = this.createPreview (val);
    this.render ();
  }

  CreatePreview (val) {
    if (typeof val === 'string') {
      Return Base64preview (Val);
    } ? ?? {
      return blurhashpreview (val);
    }
  }

  CreateMainImage (url) {
    this.loaded = false;
    const img = document.createElement ( 'IMG');
    img.alt = '? ??';
    img.addeventListener ( 'load', () = & gt; {
      if (img === this.imageel) {
        this.loaded = true;
        this.render ();
      }
    });
    img.src = url;
    this.imageel = img;
  }

  ConnectedCallback () {
    this.render ();
  }

  ?? () {
    const elementmaybe = this.loaded? this.imageel : this.previewel;
    SyncsingLechild (this, emectmaybe);
  }
}

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

 ?? ?? attributes = [ 'url'];

AttributeChangedCallback (??, OldValue, NewValue) {
  if (name === 'url') {
    this.createmainimage (newValue);
  }
}

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

 CreateMainImage (url) {
  this.loaded = false;
  const img = document.createElement ( 'IMG');
  img.alt = '? ??';
  img.addeventListener ( 'load', () => {
    if (img === this.imageel) {
      this.loaded = true;
      this.render ();
    }
  });
  img.src = url;
  this.imageel = img;
}

???? Base64 ???? ??? ?? Blurhash ??? ? ??? ???? ??? ????.

 ???? ?? (val) {
  this.previewel = this.createPreview (val);
  this.render ();
}

CreatePreview (val) {
  if (typeof val === 'string') {
    Return Base64preview (Val);
  } ? ?? {
    return blurhashpreview (val);
  }
}

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

 ?? base64preview (val) {
  const img = document.createElement ( 'IMG');
  img.src = val;
  ?? IMG;
}

?? blurhashpreview (????) {
  const canvasel = document.createelement ( 'canvas');
  const {w : ??, H : ??} = ????;

  canvasel.width = ??;
  Canvasel.height = ??;

  const pixels = decode (preview.blurhash, ??, ??);
  const ctx = canvasel.getContext ( '2d');
  const imageata = ctx.createimagedata (??, ??);
  imagedata.data.set (??);
  ctx.putImagedata (Imagedata, 0, 0);

  ?? ???;
}

??? ?????, ??? ?? ?? :

 ConnectedCallback () {
  this.render ();
}

?? () {
  const elementmaybe = this.loaded? this.imageel : this.previewel;
  SyncsingLechild (this, emectmaybe);
}

??? ?? ?? ??? ?? ?? ??? ?? :

 ???? ?? ??? ?? (????, ??) {
  const currentchild = container.firstelementchild;
  if (currentchild! == child) {
    ClearContainer (????);
    if (child) {
      ????. AppendChild (??);
    }
  }
}

???? ?? ClearContainer (el) {
  ??? ????.

  while ((child = el.firstelementchild)) {
    el.RemoveChild (??);
  }
}

??? ???? ??? ???? ?? ??? ??? ?? ? ?? ??? ???????, ??? ??? ??? ???? ??? ??? ? ? ??? ????. ??? React? ????? ?? ??? ?????.

????

?? ?? Lit? React Wrapper? ??????. ??? ???? ???? ?? ??? React? ?? ??? ?? ??? ??? ?????. ??? Microsoft? ?? ???? Fast Web Component Library? ?? ? Lit? ??? ??? ?? ??????.

?? ????? React?? ??? ?? ?? ??? ??? ??? ?? ? ?? ?? ??? ?????. ??? ??? ??? ?? ????. ?? ??, solid.js? ???? ?? ?? ????? ?????.

???

? ?? ??? ?? ? ?? ??? ???? ??? ?????. UI ?? "??"?? ??? ???? ?? JavaScript ??? ??? ?? ???? ??? ? ??? ? ? ????. Svelte ?? React ?? ??? ?? ? ?? ????? ???? ?? ?? ????? ??? ??? ?? ??? ? ? ??? ????.