创建并使用自定义标签

Web Components 标准非常重要的一个特性是，它使开发者能够将HTML页面的功能封装为 custom elements（自定义标签）,本篇介绍使用 CustomElementRegistry 来管理我们的自定义标签

1. 创建自定义标签

  <script>

  class PopUpInfo extends HTMLElement {

    constructor () {

      super();

      // 在此定义自定义标签 我顶一个icon和text并列的

      // Create a shadow root

      let shadow = this.attachShadow({mode: 'open'});
  // 创建我们需要的标签

  let wrapper = document.createElement(&#39;div&#39;);

  let iconBox = document.createElement(&#39;div&#39;);

  let textBox = document.createElement(&#39;div&#39;);

  // 为标签添加样式

  wrapper.setAttribute(&#39;class&#39;,&#39;wapper&#39;);

  iconBox.setAttribute(&#39;class&#39;,&#39;icon&#39;);

  textBox.setAttribute(&#39;class&#39;,&#39;text&#39;);

  let text = this.getAttribute(&#39;text&#39;); // 获取标签里面传递的值

  textBox.textContent = text;

  let imgUrl;

  if(this.hasAttribute(&#39;img&#39;)) {

    imgUrl = this.getAttribute(&#39;img&#39;);

  } else {

    imgUrl = &#39;default.png&#39;; // 设置一个默认图片

  }

  var img = document.createElement(&#39;img&#39;);

  img.src = imgUrl;

  iconBox.appendChild(img);

  // 书写样式

  var style = document.createElement(&#39;style&#39;);

  let lStyleStr = &#39;.wrapper { display: flex; justify-content: center; align-items: center; width: 100%; height: 50px;}&#39;

  lStyleStr += &#39;.icon {margin-right: 10px; width: 50px; height: 50px;}&#39;

  lStyleStr += &#39;.icon img { width: 100%; height: 100%;}&#39;

  lStyleStr += &#39;.text { flex: 1; font-size: 14px; color: #333; line-height: 50px;}&#39;

  style.textContent = lStyleStr;

  // 将样式和dom元素挂载到页面

  shadow.appendChild(style);

  shadow.appendChild(wrapper);

  wrapper.appendChild(icon);

  wrapper.appendChild(info);

}

}
</script>

2. 注册自定义标签

  <script>

    customElements.define('popup-info', PopUpInfo);

  </script>

3. 使用自定义标签

<body>

  <popup-info img="you_picture.jpg" text="你的文字"></popup-info>

</body>

在html中创建自定义标签的更多相关文章

  1. 使用原生js创建自定义标签

    使用原生js创建自定义标签 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  2. 在jsp页面中使用自定义标签

    在某些场景中,自定义标签可封装大量代码,使页面变得更简洁,标签也可以很方便地在不同页面中实现通用而不必去粘贴大量的js代码.现在把最近做的一个自定义标签在这里总结一下.首先总结一下关于自定义标签的一些 ...

  3. 在Oracle电子商务套件版本12.2中创建自定义应用程序（文档ID 1577707.1）

    在本文档中 本笔记介绍了在Oracle电子商务套件版本12.2中创建自定义应用程序所需的基本步骤.如果您要创建新表单,报告等,则需要自定义应用程序.它们允许您将自定义编写的文件与Oracle电子商务套 ...

  4. js中创建html标签、加入select下默认的option的value和text、删除select元素节点下全部的OPTION节点

    <pre name="code" class="java"> jsp 中的下拉框标签: <s:select name="sjx&qu ...

  5. javaweb回顾第八篇如何创建自定义标签

    前言:在javaweb开发中自定义标签的用处还是挺多的.今天和大家一起看自定义标签是如何实现的. 1:什么是标签 标签是一种XML元素,通过标签可以使JSP页面变得简介易用,而且标签具有很好的复用性. ...

  6. 在 ASP.NET MVC 中创建自定义 HtmlHelper

    在ASP.NET MVC应用程序的开发中,我们常碰到类似Html.Label或Html.TextBox这样的代码,它将在网页上产生一个label或input标记.这些HtmlHelper的扩展方法有些 ...

  7. spring中的自定义标签

    为了给系统提供可配置化支持,一般会用原生态的方式去解析定义好的XML文件,然后转化为配置对象.这种方式对于简单.单一的配置文件,或者是XML配置格式固定的配置文件,比较容易处理.但是对于一些配置非常复 ...

  8. Spring源码学习-容器BeanFactory(四) BeanDefinition的创建-自定义标签的解析.md

    写在前面 上文Spring源码学习-容器BeanFactory(三) BeanDefinition的创建-解析Spring的默认标签对Spring默认标签的解析做了详解,在xml元素的解析中,Spri ...

  9. 在django中使用自定义标签实现分页功能

    效果演示: github地址:https://github.com/mncu/django_projects/tree/master/django_projects/pagination_test 本 ...

随机推荐

  1. TCP通讯代码

    服务端代码: import socket server_socket=socket.socket(socket.AF_INET,socket.SOCK_STREAM) # 使用固定端口 server_ ...

  2. CSS文本居中显示

    因为一直为元素居中问题而困扰,所以决定把自己遇到和看到的方法记录下来,以便以后查看 如果要让inline或inline-block元素居中显示,则父元素css中包含text-align:center; ...

  3. redhat 7.6 find 命令

    1.按名字查找 find  ./    -name  filename    //精确查找 ,./ 代表当前目录   -name 查询名称 filename具体文件名称 find  ./    -na ...

  4. 「BJOI2018」求和

    「BJOI2018」求和 传送门 观察到 \(k\) 很小而且模数不会变,所以我们直接预处理 \(k\) 取所有值时树上前缀答案,查询的时候差分一下即可. 参考代码: #include <alg ...

  5. Python 基础之函数初识与函数参数

    一.函数初识 定义:满足某一个方法 满足某一个功能#(1)功能(包裹一部分代码 实现某一个功能 达成某一个目的)#(2)可以反复调用,提高代码的复用性,提高开发效率,便于维护管理#(3)函数的基本格式 ...

  6. 设计模式课程 设计模式精讲 2-2 UML类图讲解

    1 类图讲解 1 类图讲解 + 公共方法 - private权限 # protected权限 包内和包外继承的子类都能引用 ~ default权限(包权限)只有包内能引用 下划线   静态 Stati ...

  7. JAVA关于回文判断的实现

    (一). 设计思想: 首先输入字符串,然后判断长度若长度为0或1则输出TRUE若长度大于一则进行判断, 若符合条件则输出TRUE反之输出FALSE. (二)程序源代码 import java.util ...

  8. 初探网络流：dinic/EK算法学习笔记

    前记 这些是初一暑假的事: "都快初二了,连网络流都不会,你好菜啊!!!" from 某机房大佬 to 蒟蒻我. flag:--NOIP后要学网络流 咕咕咕------------ ...

  9. Python中from scipy.misc import imread报错的原因？

    from scipy.misc import imread 报错 查询后其原因是from scipy.misc import imread,imwrite 等方法已经被弃用,Python已经将imre ...

  10. RCTF crypto100(1)

    题面是一个文件,里面是用base64加密的字符串,如下所示: IyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjI ...