用X-TAG構建自定義的Web組件-css教學-PHP中文網

首頁

web前端

css教學

用X-TAG構建自定義的Web組件

Christopher Nolan

Feb 23, 2025 am 08:26 AM

Building Custom Web Components with X-Tag

用X-TAG構建自定義的Web組件

鑰匙要點

X-TAG提供了一個緊湊的，功能豐富的接口，用於快速Web組件開發，主要關注自定義元素API。
> 與聚合物相比，
>

> X-TAG是一個由Microsoft支持的開源，JavaScript庫，它包裝了W3C標準Web組件API家族，以提供一個緊湊的，功能豐富的界面，用於快速組件開發。 X-TAG為所有Web組件API（自定義元素，陰影DOM，模板和HTML Imports）提供功能掛鉤，但它僅需要自定義元素支持才能操作。在沒有本機自定義元素支持的情況下，X-TAG使用一組與Google聚合物框架共享的多填充。

>換句話說，X-TAG是Microsoft對Google的聚合物是什麼。他們倆唯一常見的是基礎多填充，它可以支持非支撐瀏覽器中的Web組件。

x-tag與聚合物有何不同？聚合物將所有四種Web組件技術組合在一起，即HTML導入，自定義元素，Shadow DOM和HTML模板中的單個軟件包。它為開發人員提供了易於使用的API，用於構建自定義Web組件。另一方面，X-TAG僅提供自定義元素API來構建自定義Web組件。當然，您還可以與X-Tag庫一起使用其他Web組件API。
> Mozilla項目不是X-Tag嗎？

是的，但是現在不再是。經過一番挖掘，我設法發現X-Tag項目的原始開發人員Daniel Buchner曾在Mozilla創建圖書館時在Mozilla工作。但是從那以後，他搬到了微軟並繼續該項目。此外，他是前莫濟式的幫助，是圖書館的唯一貢獻者。因此，它現在是一個由前莫油創立的Microsoft支持的項目。

開始使用X-Tag

開始

>在本文中，我們將使用X-TAG庫構建自定義元素，以使用以下標記嵌入Google Map Street視圖：

<span><span><span><google-map> latitude<span>="40.7553231"</span> longitude<span>="-73.9752458"</span>></google-map></span><span><span></span>></span></span></span>

自定義元素將具有兩個屬性，即緯度和經度，以指定位置的坐標。由於這些屬性是可選的，因此我們還將為每個屬性分配每個屬性，以防開發人員未能在標記中定義它們。

。

讓我們首先在我們的文檔的中包括x-tag javaScript庫。

<span><span>
</span><span><span><span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- X-Tag library including the polyfill -->
</span>    <span><span><span><script> src<span >="https://rawgit.com/x-tag/core/master/dist/x-tag-core.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- Custom element markup will appear here -->
</span>    
    <span><span><span><script>></script></span><span>
</span></span><span><span>      <span><!-- The behavior of the custom element will be defined here -->
</span></span></span><span><span>    </span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span>

>在文檔的中包括x-tag庫很重要。這樣就可以在渲染引擎遇到我們將在內使用的自定義元素標記之前完全下載和解析。

定義自定義元素

與聚合物不同，用X-TAG創建自定義元素的過程完全由JavaScript驅動。 X-TAG庫提供了許多有用的方法，回調和屬性，以定義我們元素的自定義行為。一個用於創建具有X標籤的自定義元素的典型骨架，如下所示：

內容 - 通常，自定義元素可能需要一些其他標記來進行結構或演示。這接受HTML字符串或多行注字符串，將標記註入DOM。

xtag<span>.register('google-map', {
</span>
  <span>content: '',
</span>
  <span>lifecycle: {
</span>    <span>created  : function(){ 
</span>      <span>/* Called when the custom element is created */ 
</span>    <span>},
</span>    <span>inserted : function(){ 
</span>      <span>/* Called when the custom element is inserted into the DOM */ 
</span>    <span>},
</span>    <span>removed  : function(){ 
</span>      <span>/* Called when the custom element is removed from the DOM */ 
</span>    <span>},
</span>    <span>attributeChanged: function(attrName<span>, oldValue, newValue</span>){
</span>      <span>/* Called when the attribute of the custom element is changed */
</span>    <span>}
</span>  <span>},
</span>
  <span>accessors : {},
</span>  <span>methods   : {},
</span>  <span>events    : {}
</span><span>});</span>

>生命週期 - 這包含有用的回調方法，旨在針對自定義元素的生命週期中的不同階段。

配件 - 這為訪問對象屬性，設置器和getters提供了一個常見的接口，並將它們與相應的HTML屬性鏈接在一起。當屬性鏈接到getter/setter時，它們的狀態始終保持同步。
方法 - 自定義元素可能需要一些自己的獨特方法來提供所需的功能。只需將方法對象添加到頂級XTAG.REGISTER（）定義對象，然後在其中包含所有用戶定義的方法。
>
基本思想是使用iframe嵌入Google地圖，並以以下格式指定SRC URL：

<span><span><span><google-map> latitude<span>="40.7553231"</span> longitude<span>="-73.9752458"</span>></google-map></span><span><span></span></span></span></span>

>上面的代碼有效，但我們需要擺脫iframe.src中的硬編碼坐標值，而是直接從自定義元素屬性來源。為此，我們將利用登錄對象，其中屬性名稱構成密鑰。我們通過聲明屬性來將它們與HTML屬性鏈接：{}。

然後，我們可以在指定SRC URL時直接使用這些變量：

<span><span>
</span><span><span><span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- X-Tag library including the polyfill -->
</span>    <span><span><span><script> src<span >="https://rawgit.com/x-tag/core/master/dist/x-tag-core.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- Custom element markup will appear here -->
</span>    
    <span><span><span><script>></script></span><span>
</span></span><span><span>      <span><!-- The behavior of the custom element will be defined here -->
</span></span></span><span><span>    </span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span>

應用修飾觸摸

xtag<span>.register('google-map', {
</span>
  <span>content: '',
</span>
  <span>lifecycle: {
</span>    <span>created  : function(){ 
</span>      <span>/* Called when the custom element is created */ 
</span>    <span>},
</span>    <span>inserted : function(){ 
</span>      <span>/* Called when the custom element is inserted into the DOM */ 
</span>    <span>},
</span>    <span>removed  : function(){ 
</span>      <span>/* Called when the custom element is removed from the DOM */ 
</span>    <span>},
</span>    <span>attributeChanged: function(attrName<span>, oldValue, newValue</span>){
</span>      <span>/* Called when the attribute of the custom element is changed */
</span>    <span>}
</span>  <span>},
</span>
  <span>accessors : {},
</span>  <span>methods   : {},
</span>  <span>events    : {}
</span><span>});</span>

造型自定義元素類似於造型任何其他HTML標籤。類，ID和屬性選擇器與自定義元素一起按預期工作。例如，我們將在新創建的自定義元素中添加一個盒子陰影和邊界 - 拉迪烏斯。

>

使用自定義元素現在很簡單，就像在

中包括以下標記：：

https://www.google.com/maps/embed/v1/streetview?key=<span><span><span><api_key>></api_key></span>&location=<span><span><latitude>></latitude></span>,<span><span><longitude>></longitude></span></span></span></span></span>

最終結果在下面的Codepen中可見：

>請參閱codepen上的sitepoint（@sitepoint）的pen x-tag

<span>// Insert your API key here
</span><span>var API_KEY = <api_key>;
</api_key></span>
xtag<span>.register('google-map', {
</span>  <span>lifecycle: {
</span>    <span>created: function() { 
</span>      <span>var iframe = document.createElement('iframe');
</span>      iframe<span>.width = 600;
</span>      iframe<span>.height = 600;
</span>      iframe<span>.frameBorder = 0;
</span>      iframe<span>.src = 'https://www.google.com/maps/embed/v1/streetview?key=' + 
</span>                    <span>API_KEY + '&location=40.7553231,35.3434';
</span>      <span>this.appendChild(iframe);
</span>    <span>}
</span>  <span>}
</span><span>});</span>

自定義元素。

>儘管瀏覽器對Web組件的支持有點粗略，但是我們使用X-TAG庫與Polyfill的演示應該在包括IE9及以上在內的所有現代瀏覽器上使用。最終想法與聚合物相比，X-TAG提供了更簡單的API來理解和實現自定義元素，這主要是由於聚合物缺乏複雜的功能。如果您打算保持設置輕巧和靈活，並且對其他Web組件API沒有好的用例，那麼X-TAG肯定是該工作的合適候選人。經常詢問的問題（常見問題解答）有關使用x-tag 構建自定義Web組件的問題

什麼是x-tag，為什麼在Web開發中很重要？

x-tag是一個小的JavaScript庫，可以簡化自定義，可重複使用的HTML元素的創建。它是Web組件套件的一部分，其中還包括陰影DOM，HTML模板和自定義元素。 X-TAG在Web開發中很重要，因為它允許開發人員創建自己的HTML元素，封裝其代碼並保持其代碼庫清潔和可維護。它還促進了代碼重用，它可以大大加快開發過程。

> x-tag與其他Web組件庫有何不同？

x-tag是獨一無二的，它的簡單性和易於使用。與其他圖書館不同，X-Tag不需要任何構建步驟或轉介，而且足跡很小。它還具有簡單，直觀的API，可以輕鬆定義自定義元素及其行為。此外，X-TAG與所有現代瀏覽器兼容，可以與其他庫和框架一起使用。

>我可以與其他JavaScript庫或框架一起使用X-TAG？它不會施加任何限製或特定的架構模式，因此您可以輕鬆地將其集成到現有項目中。無論您是使用jQuery，React，Angular還是Vue.js，都可以使用X-TAG創建可以在您的應用程序中重複使用的自定義元素。

>如何使用X-定義自定義元素標籤？

用X-TAG定義自定義元素很簡單。您只需調用XTAG.REGISTER函數，以自定義元素的名稱和定義其行為的對像傳遞。該對象可以包括生命週期方法，登錄器和事件處理程序。這是一個基本示例：

XTAG.REGISTER（'my-element'，{

> lifeCycle：{ create：function：function（）{ this.textContent ='hello ，world！'' ;
}
}
}）;

> x-tag中的生命週期方法是什麼？生命週期方法是在自定義元素生活的不同階段被調用的特殊方法。 X-TAG支持四種生命週期方法：創建，插入，刪除和屬性。這些方法允許您在創建元素，添加到DOM，從DOM中刪除或其中一個屬性更改時執行特定的操作。
>
如何使用X-TAG處理事件？ >
X-TAG提供了一種處理自定義元素事件的簡單方法。註冊元素時，您可以在事件對像中定義事件處理程序。例如，要處理單擊事件，您將執行類似的操作：

xtag.register（'my-element'，{

evest：{ 🎜> console.log（'element clicked！'）;

}

}）;

我可以使用x-tag創建shadow dom元素？

是的，x-tag支持陰影元素的創建。這使您可以封裝元素的樣式和標記，使其與文檔的其餘部分分開。要創建陰影根，您可以在元素創建的生命週期方法內使用this.createshadowroot（）方法。

我如何樣式我的自定義元素？

您只需樣式的自定義元素像其他任何HTML元素一樣，使用CSS。如果您的元素使用Shadow dom，則可以在陰影根內包含一個

>我可以使用X-tag創建自定義表單元素嗎？

是的，是的，x-tag可以是用於創建自定義表單元素。但是，請記住，默認情況下，自定義表單元素不會參與表單提交或約束驗證。您將需要為這些功能提供自己的邏輯。