您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > HTML

如何编写一个原生 Web Components 组件

时间:2022-10-07 20:25:29  来源:环球网  作者:茶无味的一天

当今前端编程中,利用语义化的 html 结合 css 来完一个组件并不是一件难事,这也意味着无论在 ReactVue 中都可以插入,不过它俩不是今天的主角,接下来我将用一个例子来介绍如何封装一个完整的原生 HTML 的 Web Components 组件,让我们开始吧!

HTML结构

首先我们来了解下 HTML 中的 <details> 元素,它可以用于创建一个小部件,其中包含仅在小部件处于“打开”状态时才可见的附加信息,<details>元素内可以包含的内容没有任何限制。

默认情况下,元素创建的小部件<details>处于“关闭”状态(open标签可使其打开)。通过单击小部件在“打开”和“关闭”状态之间切换,以显示或隐藏标签中包含的附加信息,内部标签 <summary> 元素则可为该部件提供概要。

一个简单的例子如下:

<details>
    <summary> 不能说的秘密 </summary>
    藏的这么深,可还是被你发现了
</details>
details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: .5em .5em 0;
}

summary {
    font-weight: bold;
    margin: -.5em -.5em 0;
    padding: .5em;
}

details[open] {
    padding: .5em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: .5em;
}

 

使用语义化 HTML 的优点:页面内容结构更清晰,方便开发者阅读,更利于浏览器的理解与加载,搜索引擎解析与seo优化。

添加亿点样式

原生元素默认的样式很简陋,因此我们需要为其定制一下样式,这块内容我们简单带过,只讲解关键部分,样式内容有省略,具体可以在文末的码上掘金中看到呈现效果。

.ContentWarning > summary {
  position: relative;
  list-style: none; /** 去除默认样式 **/
  user-select: none; 
  cursor: pointer;
  /** 为其添加一个斜线背景 **/
  --stripe-color: rgb(0 0 0 / 0.1);
  background-image: repeating-linear-gradient(45deg,
      transparent,
      transparent 0.5em,
      var(--stripe-color) 0.5em,
      var(--stripe-color) 1em);
}

/** 通过var变量调整悬停时的颜色样式 **/
.ContentWarning>summary: hover,
.ContentWarning>summary: focus {
  --stripe-color: rgb(150 0 0 / 0.1);
}

 

封装模板

现在我们来把它封装成一个完整的组件,这需要先将 HTML 编写在模板 template 当中,并设置一个 id,如下所示:

<template id="warning-card">  
  <details class="ContentWarning">
    <summary>
      <strong>⚠️ 注意:</strong> 以下为隐藏内容
    </summary>
    <slot name="desc"> 藏的这么深,可还是被你发现了 </slot>
  </details>
</template>

熟悉 Vue 的小伙伴应该很容易理解上面的代码,结构很相似,不过网页不会直接渲染它包裹的内容。此外我们还对此模板设置了一个插槽 slot,后面会讲到它的作用。

定义组件

有了上面封装好的模板,我们就需要在 JS 中定义成可用组件来让其能够被使用,调用 window 下的 customElements.define 方法,第一个参数是传入组件名称,我们定义组件名为: warning-card ,第二个参数传入一个继承了 HTMLElement 的类,在其构造方法当中获取并克隆一个新的 HTML 节点,它会通过 AppendChild 渲染到页面当中。

window.customElements.define('warning-card',
  class extends HTMLElement {
    constructor() {
      super();
      var templateElem = document.getElementById('warning-card');
      var content = templateElem.content.cloneNode(true);
      this.appendChild(content);
    }
  })

接着我们就可以在页面中把它当作组件那样使用了:

<warning-card> </warning-card>

插槽与传参

回头看看上面我们模板中设置的插槽 slot,此时还是没有生效的,我们需要稍微改写一下构造函数中的渲染方式,将 web 组件定义为一个 Shadow DOM,这样构造的是一个可以将标记结构、样式和行为隐藏起来,并与页面上的其他代码相隔离,保证不同的部分不会混在一起的独立元素,并在最后使用 Node.cloneNode() 方法添加了模板的拷贝到 Shadow 的根结点上。

window.customElements.define('warning-card',
  class extends HTMLElement {
    constructor() {
      super();
      var template = document.getElementById('warning-card').content;
      this.attachShadow({ mode: 'open' }).appendChild(template.cloneNode(true));
    }
  })

现在我们尝试使用下组件,往其内容添加一个图片,指向名为 desc 的 slot 插槽中:

<warning-card>
  <img slot="desc" src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba825ffee78c4a1b9c0232e5d2f1d048~tplv-k3u1fbpfcp-watermark.image?" />
</warning-card>

这时你会发现,图片插入到 details 元素的隐藏区域当中了,slot 已经成功生效,但是样式却消失了,这时因为组件已经被完全隔离,我们需要将样式作用在其内部才会生效。

<template id="warning-card">
  <style>
    <!-- TODO: 组件的样式 -->
  </style>
  
  <details class="ContentWarning">
    <summary>
      <strong>⚠️ 注意:</strong>
    </summary>
    <slot name="desc">THE DESCRIPTION</slot>
  </details>
</template>

这样组件就正常了:

 

除了定制模板中的插槽,我们也可以通过 HTML 标签属性来实现一些简单的传参,例如在 summary 标签中显示一个标题:

<warning-card title="前方高能">
</warning-card>

我们只需要在模板中定义好这个标题的位置:

<template id="warning-card">
  <details class="ContentWarning">
    <summary>
        <!-- TODO: 模板中加入一个span标签 -->
      <strong>⚠️ 注意:</strong> <span id="title"></span>
    </summary>
  </details>
</template>

最后在构造函数中我们通过 document 的原生方法写入模板中就可以了:

window.customElements.define('warning-card',
  class extends HTMLElement {
    constructor() {
      super();
      var template = document.getElementById('warning-card').content;
      // TODO: 找到title标签,写入传入组件的title属性值
      template.querySelector('#title').innerText = this.getAttribute('title');
      this.attachShadow({ mode: 'open' }).appendChild(template.cloneNode(true));
    }
  })

结束

至此,我们通过一个简单的原生组件学习了如何编写 Web Components,可以在此代码片段中查看具体源码:原生Web Components组件 - 码上掘金原生Web Components组件 - 码上掘金

以上就是文章的全部内容,希望对你有所帮助!如果觉得文章写的不错,可以点赞收藏,也欢迎关注,我会持续更新更多前端有用的知识与实用技巧,我是茶无味de一天,希望与你共同成长~



Tags:Web Components   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
当今前端编程中,利用语义化的 HTML 结合 CSS 来完一个组件并不是一件难事,这也意味着无论在 React、Vue 中都可以插入,不过它俩不是今天的主角,接下来我将用一个例子来介绍如何...【详细内容】
2022-10-07  Tags: Web Components  点击:(0)  评论:(0)  加入收藏
▌简易百科推荐
当今前端编程中,利用语义化的 HTML 结合 CSS 来完一个组件并不是一件难事,这也意味着无论在 React、Vue 中都可以插入,不过它俩不是今天的主角,接下来我将用一个例子来介绍如何...【详细内容】
2022-10-07  茶无味的一天  环球网  Tags:Web Components   点击:(0)  评论:(0)  加入收藏
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><frameset rows="10%,*"><frame src="upper/one.php" name="logo"><frameset cols="20%,...【详细内容】
2022-08-03  lawsom    Tags:HTML框架   点击:(188)  评论:(0)  加入收藏
快速总结 ↬ 在这篇文章中,Louis Lazaris 描述并演示了一些有趣的 HTML 属性,您可能没有听说过也可能没有听说过,并且可能会发现它们非常有用,可以在您的项目中亲自使用。一月份...【详细内容】
2022-04-24  艾编程    Tags:html属性   点击:(97)  评论:(0)  加入收藏
在网页中添加视频、声音、动画等,可以增强用户体验。在HTML5之前,为网页添加多媒体的唯一办法,就是使用第三方的插件(如,Adobe Flash等)。HTML5中,提供了对多媒体的原生支持,只需通...【详细内容】
2022-04-19  我是FEIYA    Tags:HTML   点击:(172)  评论:(0)  加入收藏
我们可以使用以下的方式去渲染htmlfunc main() { router := gin.Default() router.LoadHTMLGlob("templates/*") //router.LoadHTMLFiles("templates/template1.html", "tem...【详细内容】
2022-03-17  萧潇墨    Tags:html   点击:(161)  评论:(0)  加入收藏
最近 Bootstrap 4 已经正式发布了,可能已经有爱尝鲜的小伙伴在 alpha 阶段就尝试过 BS4。不过今天要说的不是 BS4,而是官网里引入 BS4 框架依赖的 jQuery 的代码:<script src="...【详细内容】
2022-02-01  可可的答案    Tags:crossorigin   点击:(264)  评论:(0)  加入收藏
此文由掘金@天行天忌授权发布,前端晚间课对其内容进行微改。 HTML,超文本标记语言,是一种用于创建网页的标准标记语言。自从引入 HTML 以来,它就一直用于构建互联网。与 JavaScr...【详细内容】
2021-11-23  前端晚间课    Tags:HTML6   点击:(2911)  评论:(0)  加入收藏
HTML是什么?超文本标记语言(Hyper Text Markup Language),标准通用标记语言下的一个应用。HTML 不是一种编程语言,而是一种标记语言 (markup language),是网页制作所必备的。“...【详细内容】
2021-11-05  人生三部曲丶    Tags:HTML   点击:(147)  评论:(0)  加入收藏
一、iframe标签 自己编写的页面中如果要引用外部的页面的话,可以使用iframe标签来实现。为了更好地理解举个例子,前面几篇中我们都是在index.hmtl中编写代码。如果有个需求是...【详细内容】
2021-11-03  HillelDu    Tags:html   点击:(178)  评论:(0)  加入收藏
我们倾向于使用HTML与CSS、JavaScript等,使我们的网站或博客看起来更有吸引力,但你知道仅HTML就有很多实用的秘密,可能会派上用场,帮助你设计一个华丽的网站?下面是一些很酷的HTM...【详细内容】
2021-08-13  杭州程序员小张    Tags:HTML   点击:(179)  评论:(0)  加入收藏
相关文章
    无相关信息
站内最新
站内热门
站内头条