本文探討了Web組件的一個強大方面：自定義內置的HTML元素。雖然我們以前介紹了創建自定義元素，但該技術增強了現有元素，提供了改進的SEO和可訪問性等好處。它類似於創建完全獨立的元素，但具有關鍵差異。
文章系列：
is屬性將標準元素轉換為Web組件。這在添加自定義功能時利用元素的固有結構和功能。搜索引擎和屏幕閱讀器容易理解標準元素，這使得與創建全新的自定義標籤更容易訪問。
重要說明： Safari和一些不太常見的瀏覽器僅支持完全獨立的自定義元素，而不支持此內置元素自定義。稍後我們將討論多填充。
讓我們重構<apocalyptic-warning></apocalyptic-warning>上一篇文章作為自定義內置元素的元素。核心變化涉及將特定元素（例如， HTMLDivElement ）擴展而不是通用的HTMLElement ，然後添加{ extends: 'div' }到customElements.define() 。
定義（定義）（
“啟示錄”，
類Apocalypsewarning擴展了HTMLDIVELEMENT {
constructor（）{
極好的（）;
讓警告= document.getElementById（“ WarningTemplate”）;
讓mywarning = parnning.content;
this.attachshadow（{mode：“ open”}）。附錄（mywarning.clonenode（true））;
}
}，，
{擴展：“ div”}
）； HTML從<apocalyptic-warning></apocalyptic-warning>到<div is="apocalyptic-warning">。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div is="apocalyptic-warning">
亡靈
</div></pre><div class="contentsignin">登入後複製</div></div>
<p>請記住：Safari用戶不會看到Web組件增強功能。</p>
<p>只有特定的元素才能支持陰影DOM。安全考慮將其限制為這樣的佈局元素<code><div>，，，，<code><nav></nav> ，，，，<main></main>等等，文字元素喜歡<h1></h1>到<h6></h6>和元素。還包括自動定制元素。<p>創建Web組件並不總是需要Shadow dom。讓我們使用內置的Lightbox構建圖像來說明這一點。我們將對較大圖像使用<code>is屬性和數據屬性（ Data data-lbsrc ）。
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174243979698755.jpg" class="lazy" alt="用網絡組件增壓內置元素比您想像的要容易" data-lb is="light-box">
JavaScript被簡化，省略了陰影DOM，模板和插槽：
定義（定義）（
“燈箱”，
類Lightbox擴展了HTMLIMAGEELEMENT {
constructor（）{
極好的（）;
令lb = document.createelement（“ div”）;
lb.Style.display =“ none”;
lb.Style.Position =“絕對”;
lb.Style.height =“ 100VH”;
lb.Style.Width =“ 100VW”;
lb.Style.top = 0;
lb.Style.Left = 0;
lb.Style.background =`rgba（0,0,0，0.7）URL（$ {this.dataset.lbsrc}）no-repeat Center`;
lb.Style.backgroundSize =“ contain”;
lb.addeventlistener（“ click”，（）=> lb.style.display =“ none”）;
this.parentnode.insertbefore（lb，this）;
this.addeventListener（“ click”，（）=> lb.style.display =“ block”）;
}
}，，
{擴展：“ img”}
）；為了確保跨瀏覽器兼容性，尤其是對於Safari，我們將使用多填充。儘管存在一般多填充，但更有針對性的方法通常更有效。由於Safari支持自主自定義元素，我們可以創建一個自主<lightbox-polyfill></lightbox-polyfill>元素作為後備。 （對於簡潔而言，省略了此多填充的代碼，但將涉及在自主定制元素中創建類似的LightBox功能。）條件邏輯將在自定義的內置元素和基於瀏覽器支持的多填充之間切換。這確保了所有瀏覽器的一致功能。最後一步是合併此條件邏輯以僅在必要時使用多填充。
這種方法允許在維護語義HTML的同時創建自定義的內置元素，並通過使用多填充來確保更廣泛的瀏覽器兼容性。
以上是用網絡組件增壓內置元素'比您想像的要容易的詳細內容。更多資訊請關注PHP中文網其他相關文章！
