用网络组件增压内置元素'比您想象的要容易

本文探讨了Web组件的一个强大方面：自定义内置的HTML元素。虽然我们以前介绍了创建自定义元素，但该技术增强了现有元素，提供了改进的SEO和可访问性等好处。它类似于创建完全独立的元素，但具有关键差异。

文章系列：

• 网络组件比您想象的要容易
• 交互式网络组件比您想象的要容易
• 在WordPress中使用Web组件比您想象的要容易
• 用网络组件增压内置元素比您想象的要容易比您想象的要容易（您在这里）
• 上下文感知的网络组件比您想象的要容易
• Web组件伪级和伪元素比您想象的要容易

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">&lt;div is=&quot;apocalyptic-warning&quot;&gt; 亡灵 &lt;/div&gt;</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-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的同时创建自定义的内置元素，并通过使用多填充来确保更广泛的浏览器兼容性。