我們當(dāng)中那些曾經(jīng)是Web開發(fā)人員超過幾年的人使用了多個(gè)JavaScript框架編寫了代碼。有了所有的選擇 - 反應(yīng)，苗條，vue，ancular，lood-幾乎是不可避免的。在跨框架工作時(shí)，我們必須處理的更令人沮喪的事情之一是重新創(chuàng)建所有這些低級UI組件：按鈕，表，下拉次數(shù)等。特別令人沮喪的是，我們通常會(huì)在一個(gè)框架中定義它們，說出反應(yīng)，但是如果我們想在友好中構(gòu)建某些東西，則需要重寫它們?；騐ue?；蚬腆w。等等。

如果我們可以以框架 - 敏捷的方式定義這些低級UI組件，然後在框架之間重新使用它們，這會(huì)更好嗎？當(dāng)然會(huì)的！我們可以； Web組件是一種方式。這篇文章將向您展示如何。

截至目前，網(wǎng)絡(luò)組件的SSR故事有點(diǎn)缺乏。聲明性的影子DOM（DSD）是服務(wù)器端渲染的方式，但是，在撰寫本文時(shí)，它與您喜歡的應(yīng)用程序框架（例如Next，Remix或Sveltekit）並未集成在一起。如果這是您的要求，請務(wù)必檢查DSD的最新狀態(tài)。但是否則，如果SSR不是您使用的東西，請繼續(xù)閱讀。

首先，一些上下文

Web組件本質(zhì)上是您定義自己的HTML元素，例如或其他任何內(nèi)容。它們在CSS-Tricks（包括Caleb Williams的廣泛系列和John Rhea的廣泛系列）中覆蓋了它們，但我們將簡要介紹這一過程。從本質(zhì)上講，您定義一個(gè)JavaScript類，從HTMLELLENT繼承，然後定義Web組件具有的任何屬性，屬性和樣式，當(dāng)然，它最終將向您的用戶呈現(xiàn)標(biāo)記。

能夠定義與任何特定組件不綁定的自定義HTML元素令人興奮。但是這種自由也是一個(gè)限制。獨(dú)立於任何JavaScript框架而存在意味著您無法真正與那些JavaScript框架進(jìn)行交互。想想一個(gè)React組件，該組件獲取一些數(shù)據(jù)，然後呈現(xiàn)其他一些反應(yīng)組件，並沿?cái)?shù)據(jù)傳遞。這實(shí)際上不能用作Web組件，因?yàn)閃eb組件不知道如何渲染React組件。

Web組件特別像葉片成分一樣出色。葉片成分是在組件樹中渲染的最後一件事。這些是接收一些道具並渲染一些UI的組件。這些不是坐在組件樹中間的組件，而是沿著環(huán)境的數(shù)據(jù)傳遞數(shù)據(jù)等 - 不管哪個(gè)JavaScript框架都在為應(yīng)用程序的其餘部分供電。

我們正在構(gòu)建的Web組件

與其構(gòu)建一些無聊（和常見），例如按鈕，讓我們構(gòu)建一些不同的東西。在我的上一篇文章中，我們研究了使用模糊圖像預(yù)覽以防止內(nèi)容回流，並在加載圖像時(shí)為用戶提供體面的UI。我們查看了base64編碼圖像的模糊，降級版本的編碼，並在加載真實(shí)圖像時(shí)在UI中顯示了這一點(diǎn)。我們還考慮使用稱為Blurhash的工俱生成令人難以置信的緊湊，模糊預(yù)覽。

該帖子向您展示瞭如何生成這些預(yù)覽並將其在React項(xiàng)目中使用。這篇文章將向您展示如何使用Web組件中的這些預(yù)覽，以便可以通過任何JavaScript框架使用它們。

但是我們需要在跑步之前步行，因此我們首先要瀏覽一些微不足道和愚蠢的東西，以確切了解Web組件的工作原理。

這篇文章中的所有內(nèi)容都將在沒有任何工具的情況下構(gòu)建Vanilla Web組件。這意味著代碼將具有一些樣板，但應(yīng)相對易於遵循。諸如LIT或模板之類的工具設(shè)計(jì)用於構(gòu)建Web組件，可用於刪除大部分樣板。我敦促您檢查一下！但是對於這篇文章，我更喜歡更多的樣板，以換取不必介紹和教授其他依賴性。

一個(gè)簡單的計(jì)數(shù)器組件

讓我們構(gòu)建JavaScript組件的經(jīng)典“ Hello World”：櫃檯。我們將渲染一個(gè)值，並為該值增加一個(gè)按鈕。簡單而無聊，但它可以讓我們查看最簡單的Web組件。

為了構(gòu)建Web組件，第一步是製作一個(gè)JavaScript類，該類從htmlelement繼承：

類計(jì)數(shù)器擴(kuò)展htmlelement {}

最後一步是註冊Web組件，但前提是我們尚未註冊它：

 if（！customElements.get（“ counter-wc”））{
  customElements.define（“ counter-wc”，計(jì)數(shù)器）;
}

而且，當(dāng)然，將其渲染：

 <counter-wc> </counter-wc>

兩者之間的所有內(nèi)容都是使Web組件可以做我們想做的任何事情。一種常見的生命週期方法是ConnectedCallback，當(dāng)將我們的Web組件添加到DOM中時(shí)，該方法會(huì)觸發(fā)。我們可以使用該方法渲染我們想要的任何內(nèi)容。請記住，這是一個(gè)從HTMLElement繼承的JS類，這意味著我們的此值是Web組件元素本身，使用了您已經(jīng)知道和喜歡的所有正常DOM操縱方法。

最簡單，我們可以做到這一點(diǎn)：

類計(jì)數(shù)器擴(kuò)展htmlelement {
  connectedCallback（）{
    this.innerhtml =“ <div style="'顏色：綠色'">嘿</div>”;
  }
}

if（！customElements.get（“ counter-wc”））{
  customElements.define（“ counter-wc”，計(jì)數(shù)器）;
}

…這會(huì)很好。

添加真實(shí)內(nèi)容

讓我們添加一些有用的交互式內(nèi)容。我們需要一個(gè)來保持當(dāng)前數(shù)值和來增加計(jì)數(shù)器。目前，我們將在構(gòu)造函數(shù)中創(chuàng)建此內(nèi)容，並在Web組件實(shí)際位於DOM中時(shí)附加它：

 constructor（）{
  極好的（）;
  const容器= document.createelement（'div'）;

  this.valspan = document.createelement（'span'）;

  const regrement = document.createelement（'button'）;
  rezement.InnerText ='regrement';
  rezement.AddeventListener（'click'，（）=> {
    這個(gè)。＃value = this。＃currentValue 1;
  }）;

  container.appendchild（this.valspan）;
  container.AppendChild（document.createelement（'br'））;
  Container.AppendChild（增量）;

  this.container =容器;
}

connectedCallback（）{
  this.appendchild（this.container）;
  this.update（）;
}

如果您真的被手動(dòng)DOM創(chuàng)建所困擾，請記住，您可以設(shè)置InnerHTML，甚至可以將模板元素作為Web組件類的靜態(tài)屬性創(chuàng)建，請克隆它，並插入新的Web組件實(shí)例中的內(nèi)容。我可能沒有考慮其他選項(xiàng)，或者您始終可以使用LIT或SCENN等WEB組件框架。但是對於這篇文章，我們將繼續(xù)保持簡單。

繼續(xù)前進(jìn)，我們需要一個(gè)可設(shè)置的JavaScript類屬性，名為Value

 #CurrentValue = 0;

設(shè)置#value（val）{
  這個(gè)。＃currentValue = val;
  this.update（）;
}

它只是設(shè)置器的標(biāo)準(zhǔn)類屬性，以及第二個(gè)屬性以保持值。一個(gè)有趣的轉(zhuǎn)折是，我將私有JavaScript類屬性語法用於這些值。這意味著在我們的Web組件之外沒有人可以觸摸這些值。這是所有現(xiàn)代瀏覽器中都支持的標(biāo)準(zhǔn)JavaScript，因此不要害怕使用它。

或者，如果您願(yuàn)意，請隨時(shí)稱其為_value。最後，我們的更新方法：

更新（） {
  this.valspan.innertext = this。＃currentValue;
}

有用！

顯然，這不是您要大規(guī)模維護(hù)的代碼。如果您想仔細(xì)觀察，這是一個(gè)完整的工作示例。就像我說的那樣，諸如LIT和模板之類的工具旨在使其更簡單。

添加更多功能

這篇文章不是深入研究Web組件。我們不會(huì)涵蓋所有的API和生命週期；我們甚至不會(huì)覆蓋陰影根或插槽。這些主題有無窮無盡的內(nèi)容。我的目標(biāo)是提供足夠不錯(cuò)的介紹，以引發(fā)一些興趣，並提供一些有用的指導(dǎo)，以實(shí)現(xiàn)與您已經(jīng)知道和喜歡的流行JavaScript框架實(shí)際使用Web組件。

為此，讓我們稍微增強(qiáng)我們的計(jì)數(shù)器Web組件。讓我們接受顏色屬性，以控制顯示的值的顏色。而且，我們還可以接受增量屬性，因此該Web組件的消費(fèi)者一次可以將其增加2、3、4。為了驅(qū)動(dòng)這些狀態(tài)變化，讓我們在Svelte Sandbox中使用我們的新計(jì)數(shù)器 - 我們會(huì)稍微做出反應(yīng)。

我們將從與以前相同的Web組件開始，然後添加顏色屬性。為了配置我們的Web組件以接受並響應(yīng)屬性，我們添加了一個(gè)靜態(tài)觀察到的屬性，該屬性返回我們的Web組件聆聽的屬性。

靜態(tài)觀察結(jié)果= [“顏色”];

有了將其添加，我們可以添加一個(gè)屬性callback lifecycle方法，該方法將在設(shè)置或更新中列出的任何屬性時(shí)運(yùn)行。

 attributechangedCallback（名稱，oldValue，newValue）{
  如果（name ===“顏色”）{
    this.update（）;
  }
}

現(xiàn)在，我們更新我們的更新方法以實(shí)際使用它：

更新（） {
  this.valspan.innertext = this._currentValue;
  this.valspan.style.color = this.getAttribute（“ color”）|| “黑色的”;
}

最後，讓我們添加我們的增量屬性：

增量= 1;

簡單而謙虛。

在Svelte中使用計(jì)數(shù)器組件

讓我們使用剛剛做的東西。我們將進(jìn)入我們的Svelte應(yīng)用程序組件，並添加類似的內(nèi)容：

 <script>
  令顏色=“紅色”;
</script>


  主要的 {
    文字平衡：中心；
  }


<ain>
  
    紅色
    綠色
    藍(lán)色
  

  <counter-wc color="{color}"> </counter-wc>
</ain>

而且有效！我們的計(jì)數(shù)器渲染，增量和下拉列表更新顏色。如您所見，我們將顏色屬性呈現(xiàn)在我們的Svelte模板中，當(dāng)值更改時(shí)，Svelte會(huì)在我們的基礎(chǔ)Web組件實(shí)例上處理調(diào)用SetAttribute的腿部工作。這裡沒有什麼特別的：對於任何HTML元素的屬性，這是同一件事。

通過增量道具，事情變得有些有趣。這不是我們Web組件上的屬性；這是Web組件類的道具。這意味著需要在Web組件的實(shí)例上設(shè)置它。忍受我，因?yàn)槭虑闀?huì)稍微簡化。

首先，我們將在我們的Svelte組件中添加一些變量：

讓增量= 1;
讓W(xué)cinstance;

我們的計(jì)數(shù)器組件的強(qiáng)大雄厚將使您增加1個(gè)，或以2：2：

  regrement = 1}>增量1 
 regrement = 2}>增量2 

但是，從理論上講，我們需要獲得我們的Web組件的實(shí)際實(shí)例。每當(dāng)我們與React添加REF時(shí)，這都是同一件事。使用Svelte，這是一個(gè)簡單的綁定：此指令：

 <counter-wc bind color="{color}"> </counter-wc>

現(xiàn)在，在我們的Svelte模板中，我們聆聽對組件的增量變量的更改，並設(shè)置基礎(chǔ)Web組件屬性。

 $：{
  如果（wcinstance）{
    wcinstance.increment =增量;
  }
}

您可以在此現(xiàn)場演示中對其進(jìn)行測試。

顯然，我們不想為我們需要管理的每個(gè)Web組件或道具執(zhí)行此操作。如果我們只能像平時(shí)對組件道具那樣在網(wǎng)絡(luò)組件上設(shè)置增量，並且讓它僅僅工作，那就不好了嗎？換句話說，如果我們可以刪除WCinstance的所有用法並使用此更簡單的代碼：

 <counter-wc rezement="{rezement}" color="{color}"> </counter-wc>

事實(shí)證明我們可以。該代碼有效； Svelte為我們處理了所有的腿部工作。在此演示中檢查一下。這是幾乎所有JavaScript框架的標(biāo)準(zhǔn)行為。

那麼，為什麼我向您展示設(shè)置Web組件的道具的手動(dòng)方法呢？兩個(gè)原因：了解這些事情的工作原理很有用，片刻之前，我說這適用於所有JavaScript框架。但是，有一個(gè)框架令人瘋狂，不像我們剛剛看到的那樣支持Web組件道具設(shè)置。

反應(yīng)是另一種野獸

反應(yīng)。地球上最受歡迎的JavaScript框架不支持與Web組件的基本互動(dòng)。這是一個(gè)眾所周知的問題，反應(yīng)是獨(dú)一無二的。有趣的是，這實(shí)際上是在React的實(shí)驗(yàn)分支中固定的，但是由於某種原因沒有合併到第18版。也就是說，我們?nèi)匀豢梢愿櫵倪M(jìn)度。您可以通過現(xiàn)場演示自己嘗試。

當(dāng)然，解決方案是使用參考，抓住Web組件實(shí)例，並在該值更改時(shí)手動(dòng)設(shè)置增量。看起來像這樣：

導(dǎo)入React，{usestate，useref，useffect}來自'react';
導(dǎo)入'./counter-wc';

導(dǎo)出默認(rèn)函數(shù)app（）{
  const [增量，setIncrement] = usestate（1）;
  const [color，setColor] = usestate（'red'）;
  const wcref = useref（null）;

  useeffect（（）=> {
    wcref.current.increment =增量;
  }，[增量]）;

  返回 （
    <div>
      <div classname="“增量">
        <button onclick="{（）="> setIncrement（1）}>通過1 </button>增量
         setIncrement（2）}>通過2 增量
      </div>

      <select value="{color}" onchange="{（e）="> setColor（e.target.value）}>
        紅色
        綠色
        藍(lán)色
      </select>

      <counter-wc ref="{wcref}" engrement="{rezement}" color="{color}"> </counter-wc>
    </div>
  ）；
}

正如我們討論的那樣，對每個(gè)Web組件屬性手動(dòng)編碼根本是根本不可擴(kuò)展的。但是，一切都沒有丟失，因?yàn)槲覀冇袔讉€(gè)選擇。

選項(xiàng)1：到處使用屬性

我們有屬性。如果您單擊上面的React演示，則增量道具無法正常工作，但是顏色正確更改。我們不能用屬性編碼所有內(nèi)容嗎？可悲的是，不。屬性值只能是字符串。這在這裡已經(jīng)足夠好了，我們將能夠通過這種方法有所了解。諸如增量之類的數(shù)字可以從字符串轉(zhuǎn)換。我們甚至可以json stringify/解析對象。但是最終，我們需要將函數(shù)傳遞到Web組件中，到那時(shí)我們將無法選擇。

選項(xiàng)2：包裝

有一個(gè)古老的說法，您可以通過增加一定程度的間接來解決計(jì)算機(jī)科學(xué)中的任何問題（除了間接程度太多的問題外）。設(shè)置這些道具的代碼非?？深A(yù)測且簡單。如果我們將其隱藏在圖書館中怎麼辦？ LIT背後的聰明人有一個(gè)解決方案。此庫將其提供給Web組件後，為您創(chuàng)建一個(gè)新的React組件，並列出所需的屬性。雖然聰明，但我不喜歡這種方法。

我不喜歡將Web組件一對一的映射到手動(dòng)創(chuàng)建的React組件，而是只有一個(gè)React組件，我們將Web組件標(biāo)籤名稱傳遞給（在我們的情況下為Counter-WC），以及所有屬性和屬性，以及所有屬性 - 對於此組件，為了使我們的Web組件呈現(xiàn)我們的Web組件，然後添加ref，然後添加probim and a probim and a probimute and a probimute and a probim utibute and a probimutibutibute and a probim utibute utibute。在我看來，這是理想的解決方案。我不知道這樣做的庫，但是創(chuàng)建應(yīng)該很簡單。讓我們試一試！

這是我們要尋找的用法：

 <wcwrapper wctag="“" counter-wc engrement="{rezement}" color="{color}"></wcwrapper>

WCTAG是Web組件標(biāo)籤名稱；其餘的是我們要通過的屬性和屬性。

這是我的實(shí)施方式：

導(dǎo)入React，{createElement，useref，useLayouteffect，emo}來自'react';

const _wcwrapper =（props）=> {
  const {wctag，兒童，... restprops} = props;
  const wcref = useref（null）;

  uselayouteffect（（）=> {
    const wc = wcref.current;

    for（const [鍵，值]的object..entries（restprops））{
      如果（wc中的鍵）{
        如果（wc [key]！== value）{
          wc [key] = value;
        }
      } 別的 {
        if（wc.getAttribute（key）！== value）{
          wc.setAttribute（鍵，值）;
        }
      }
    }
  }）;

  返回createElement（wctag，{ref：wcref}）;
};

導(dǎo)出const wcwrapper = memo（_wcwrapper）;

最有趣的行是：

返回createElement（wctag，{ref：wcref}）;

這就是我們在用動(dòng)態(tài)名稱中創(chuàng)建react元素的方式。實(shí)際上，這就是通常將JSX轉(zhuǎn)移到的反應(yīng)。我們所有的DIV都轉(zhuǎn)換為CreateElement（“ DIV”）調(diào)用。通常，我們不需要直接調(diào)用此API，但是當(dāng)我們需要時(shí)它在那裡。

除此之外，我們還希望在我們傳遞給組件的每個(gè)道具中運(yùn)行佈局效果並循環(huán)。我們循環(huán)遍歷所有這些，並檢查它是否是檢查Web組件實(shí)例對象及其原型鏈的屬性，該鏈接將捕獲所有在類原型上浮起的getters/setter。如果不存在此類屬性，則假定它是一個(gè)屬性。無論哪種情況，我們僅在值實(shí)際更改時(shí)將其設(shè)置。

如果您想知道為什麼我們使用USELAYOUTEFFECT而不是使用效果，那是因?yàn)槲覀兿朐阡秩緝?nèi)容之前立即運(yùn)行這些更新。另外，請注意，我們對USELAYOUTEFFECT沒有依賴性數(shù)組；這意味著我們希望在每個(gè)渲染上運(yùn)行此更新。這可能是有風(fēng)險(xiǎn)的，因?yàn)镽eact傾向於重新渲染很多。我通過將整個(gè)東西包裹在react.memo中來改善這一點(diǎn)。這本質(zhì)上是現(xiàn)代版本的react.purecomponent，這意味著該組件只有在任何實(shí)際道具都更改時(shí)才會(huì)重新渲染 - 它可以通過簡單的平等檢查來檢查這種情況是否發(fā)生。

這裡唯一的風(fēng)險(xiǎn)是，如果您通過一個(gè)對象支柱，即您直接在不重新分配的情況下進(jìn)行突變，那麼您將不會(huì)看到更新。但這是高度灰心的，尤其是在React社區(qū)中，因此我不必?fù)?dān)心。

在繼續(xù)之前，我想喊一件最後一件事。您可能對使用方式不滿意。同樣，此組件是這樣使用的：

 <wcwrapper wctag="“" counter-wc engrement="{rezement}" color="{color}"></wcwrapper>

具體來說，您可能不喜歡將Web組件標(biāo)籤名稱傳遞到組件上，而是上面的 @lit-labs/react軟件包，它為每個(gè)Web組件創(chuàng)建一個(gè)新的單獨(dú)的React組件。這是完全公平的，我鼓勵(lì)您使用最適合的一切。但是對我來說，這種方法的優(yōu)勢是易於刪除。如果通過某些奇蹟React將適當(dāng)?shù)腤eb組件從其實(shí)驗(yàn)分支合併到明天的主要分支，則可以從中更改上述代碼：

 <wcwrapper wctag="“" counter-wc engrement="{rezement}" color="{color}"></wcwrapper>

…對此：

 <counter-wc ref="{wcref}</pre"><p>您甚至可以編寫一個(gè)codemod來在任何地方執(zhí)行此操作，然後完全刪除<wcwrapper>。實(shí)際上，刮擦：全局搜索和用正則替換可能會(huì)起作用。</wcwrapper></p>
<h3>實(shí)施</h3>
<p>我知道，似乎花了一段時(shí)間到達(dá)這裡。如果您還記得，我們最初的目標(biāo)是將您在上一篇文章中查看的圖像預(yù)覽代碼中獲取，並將其移至Web組件，以便在任何JavaScript框架中使用它。 React缺乏適當(dāng)?shù)腎nterop，為混合物增加了很多細(xì)節(jié)。但是，既然我們對如何創(chuàng)建Web組件有一個(gè)不錯(cuò)的處理，並使用它，實(shí)現(xiàn)幾乎將是反氣候的。</p>
<p>我將在此處放置整個(gè)Web組件，並召集一些有趣的位。如果您想在行動(dòng)中看到它，這是一個(gè)工作的演示。它將在我最喜歡的三種最喜歡的編程語言上的三本最喜歡的書之間切換。每本書的URL每次都會(huì)是唯一的，因此您可以看到預(yù)覽，儘管您可能想在DevTools網(wǎng)絡(luò)選項(xiàng)卡中插入事物，以真正看到事情發(fā)生。</p>
<details><summary>查看整個(gè)代碼</summary><pre rel="View full code" data-line="">類書房擴(kuò)展了htmlelement {
  靜態(tài)觀察到= ['url'];

  attributechangedCallback（名稱，oldValue，newValue）{
    如果（name ==='url'）{
      this.CreateMainImage（newValue）;
    }
  }

  設(shè)置預(yù)覽（val）{
    this.previewel = this.createpreview（val）;
    this.render（）;
  }

  CreatePreview（val）{
    if（typeof val ==='string'）{
      返回base64preview（val）;
    } 別的 {
      返回blurhashpreview（val）;
    }
  }

  createMainImage（url）{
    this.loaded = false;
    const img = document.createelement（'img'）;
    img.alt ='書籍封面';
    img.addeventlistener（'load'，（）=＆gt; {
      如果（img === this.imageel）{
        this.loaded = true;
        this.render（）;
      }
    }）;
    img.src = url;
    this.imageel = img;
  }

  connectedCallback（）{
    this.render（）;
  }

  使成為（） {
    const elementMaybe = this.poaded？ this.imageel：this.previewel;
    SyncsingleChild（this，elementMaybe）;
  }
}

首先，我們註冊我們感興趣的屬性並在變化時(shí)做出反應(yīng)：

靜態(tài)觀察到= ['url'];

attributechangedCallback（名稱，oldValue，newValue）{
  如果（name ==='url'）{
    this.CreateMainImage（newValue）;
  }
}

這導(dǎo)致創(chuàng)建我們的圖像組件，僅加載時(shí)才會(huì)顯示：

 createMainImage（url）{
  this.loaded = false;
  const img = document.createelement（'img'）;
  img.alt ='書籍封面';
  img.addeventlistener（'load'，（）=> {
    如果（img === this.imageel）{
      this.loaded = true;
      this.render（）;
    }
  }）;
  img.src = url;
  this.imageel = img;
}

接下來，我們將擁有我們的預(yù)覽屬性，它可以是我們的base64預(yù)覽字符串，也可以是我們的Blurhash數(shù)據(jù)包：

設(shè)置預(yù)覽（val）{
  this.previewel = this.createpreview（val）;
  this.render（）;
}

CreatePreview（val）{
  if（typeof val ==='string'）{
    返回base64preview（val）;
  } 別的 {
    返回blurhashpreview（val）;
  }
}

此辯護(hù)給我們需要的任何輔助功能：

函數(shù)base64preview（val）{
  const img = document.createelement（'img'）;
  img.src = val;
  返回IMG;
}

函數(shù)BlurhashPreview（Preview）{
  const canvasel = document.createelement（'canvas'）;
  const {w：width，h：height} = preview;

  canvasel.width = width;
  canvasel.height =高度;

  const pixels = decode（preview.blurhash，寬度，高度）;
  const ctx = canvasel.getContext（'2d'）;
  const imagedata = ctx.createimagedata（寬度，高度）;
  imagedata.data.set（像素）;
  ctx.putimagedata（Imagedata，0，0）;

  返回畫布；
}

最後，我們的渲染方法：

 connectedCallback（）{
  this.render（）;
}

使成為（） {
  const elementMaybe = this.poaded？ this.imageel：this.previewel;
  SyncsingleChild（this，elementMaybe）;
}

還有一些幫助所有東西將所有東西綁在一起的方法：

導(dǎo)出函數(shù)SyncsingleChild（容器，兒童）{
  const CurrentChild = container.firstelementChild;
  if（currentchild！== child）{
    ClearContainer（容器）;
    if（child）{
      container.AppendChild（兒童）;
    }
  }
}

導(dǎo)出函數(shù)clearContainer（el）{
  讓孩子

  while（（（孩子= el.firstelementChild））{
    El.Removechild（兒童）;
  }
}

它比我們在框架中構(gòu)建它所需的樣板要多一點(diǎn)，但是好處是，我們可以在我們想要的任何框架中重新使用它 - 儘管正如我們所討論的那樣，React現(xiàn)在需要一個(gè)包裝器。

什物

我已經(jīng)提到了Lit的React包裝器。但是，如果您發(fā)現(xiàn)自己使用模具，它實(shí)際上支持僅用於React的單獨(dú)輸出管道。微軟的好人還創(chuàng)建了類似於LIT的包裝器的東西，該包裝器附加在快速Web組件庫上。

正如我提到的，所有未命名React的框架都將處理為您設(shè)置Web組件屬性。請注意，有些具有一些特殊的語法風(fēng)味。例如，使用solid.js，始終假定值是一個(gè)屬性，您可以用attr前綴覆蓋，例如。

總結(jié)

Web組件是Web開發(fā)環(huán)境中有趣的，通常是未充分利用的部分。它們可以通過管理UI或“ Leaf”組件來幫助您減少您對任何單個(gè)JavaScript框架的依賴。在將它們創(chuàng)建為網(wǎng)絡(luò)組件（而不是Svelte或React組件）的同時(shí)，並不會(huì)那麼符合人體工程學(xué)，但上升過程是它們將被廣泛重複使用。

以上是構(gòu)建可互操作的網(wǎng)絡(luò)組件的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！