在html中创建自定义标签入门教程_标签指南教程

Web Components 标准非常重要的一个特性是,它使开发者能够将HTML页面的功能封装为 custom elements(自定义标签),本篇介绍使用 CustomElementRegistry 来管理我们的自定义标签1. 创建自定义标签
class PopUpInfo extends HTMLElement {constructor(

在html中创建自定义标签入门教程

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

在html中创建自定义标签入门教程_标签指南教程

1. 创建自定义标签

<script>
class PopUpInfo extends HTMLElement {
	constructor() {
		super();
		// 在此定义自定义标签 我顶一个icon和text并列的
		// Create a shadow root
		let shadow = this.attachShadow({
			mode: ‘open‘
		});
		// 创建我们需要的标签
		let wrapper = document.createElement('div');
		let iconBox = document.createElement('div');
		let textBox = document.createElement('div');

		// 为标签添加样式
		wrapper.setAttribute('class', 'wapper');
		iconBox.setAttribute('class', 'icon');
		textBox.setAttribute('class', 'text');

		let text = this.getAttribute('text'); // 获取标签里面传递的值
		textBox.textContent = text;

		let imgUrl;
		if(this.hasAttribute('img')) {
			imgUrl = this.getAttribute('img');
		} else {
			imgUrl = 'default.png'; // 设置一个默认图片
		}
		var img = document.createElement('img');
		img.src = imgUrl;
		iconBox.appendChild(img);

		// 书写样式
		var style = document.createElement('style');
		let lStyleStr = '.wrapper { display: flex; justify-content: center; align-items: center; width: 100%; height: 50px;}'
		lStyleStr += '.icon {margin-right: 10px; width: 50px; height: 50px;}'
		lStyleStr += '.icon img { width: 100%; height: 100%;}'
		lStyleStr += '.text { flex: 1; font-size: 14px; color: #333; line-height: 50px;}'
		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>
海计划公众号
(0)
上一篇 2020/03/30 07:15
下一篇 2020/03/30 07:15

您可能感兴趣的内容

  • fbt小白知识_一个 JavaScript 国际化框架

    fbt小白知识 官方网址:https://facebookincubator.github.io/fbt GitHub:https://github.com/facebookinc…

    2020/03/06
  • js 实现 list转换成tree(数组到树)小白指南_树基础指南

    目标:JS 将有父子关系的平行数组转换成树形数据方法一:双重遍历,一次遍历parentId,一次遍历id == parendId;该方法应该能很容易被想到,实现起来也一步一步可以摸索出来; {let parentId = element.parentId;if(parentId !== 0){oldArr.forEach(ele => {if(ele.id

    2020/03/29
  • vue.js有哪些特点?使用攻略_特点菜鸟教程网

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,并且非常容易学习,也非常容易与其他库或已有项目整合。Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。Vue.js 还提供了 M

    2020/03/31
  • 如何在Vue中动态添加类名小白常识_类小白知识

    能够向组件添加动态类名是非常强大的功能。它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体。添加动态类名与在组件中添加 prop :一样简单。无论classname的计算结果是什么,都将是添加到组件中的类名。当然,对于Vue中的动态类,我们可以做的还有很多。在本文中,我们将讨论很多内容:在 Vue 中使用静态和动态

    2020/03/20
  • CSS3中的渐变效果基础知识教程_渐变教程视频

    渐变是CSS3中比较丰富多彩的一个特性,通过渐变我们可以实现许多绚丽的效果。渐变可分为线性渐变和径向渐变。(1)线性渐变:沿着某条直线朝一个方向产生渐变效果语法:linear-gradient([ || angle]? ,[,]*)参数说明:第一个参数表示线性渐变的方向。有四个取值,分别是:to left:设

    2020/03/22
  • JavaScript 私有成员入门攻略_小白帮助

    Class field declarations for JavaScript(JavaScript 类的字段声明)目前已经进入了 stage-3,其中包含一项 OOP 开发者都很关注的内容:Private fields。JavaScript 一直没有私有成员并不是没有原因,所以这一提议给 JavaScript 带来了新的挑战。但同时,JavaScript

    2020/03/30
  • 深入理解Js闭包小白入门_闭包基础知识入门

    什么是闭包?闭包的概念:《JavaScript权威指南》:函数对象可以通过作用域链相互关联起来,函数体内部的变量可以保存在函数作用域内,这种特性称为“闭包”。不好理解?那就通俗点讲:所谓闭包,就是一个函数,这个函数能够访问其他函数的作用域中的变量。理解闭包理解闭包首先要了解嵌套函数的词法作用域规则,先来看一下这段代码var scope = ‘global s

    2020/03/24
  • 微信小程序不支持Echarts中tooltip的解决方法入门基础知识_echarts小白基础

    一.问题 Echarts官方文档明确指出自己不支持微信小程序中使用Tooltip这个功能。但是只要做过图表设计的人都知道,Tooltip这个功能有多么重要,尤其是对于line图而言。那么如何解决或者说间接实现tooltip呢?二.解决思路1.第一种思路:1). 在原来的图上加一个label设置让他显示每个数据的纵坐标。当然,因为数据过多的原因,他

    2020/04/03
  • HTML5的新特性(面试必备)菜鸟教程_面试使用帮助

    面试前端的时候,有可能面试官会问你,让你谈谈对HTML5的认识。在教材上有关于HTML5新特性的概述,我觉得有必要整理一下,可以让自己对HTML5有一个比较全面的认知。HTML5不仅仅是HTML规范的当前最新版本,也代表了一系列Web相关技术的总称,其中最重要的3项技术就是HTML5核心规范、CSS3(层叠样式表的最新版本)和JavaScript(一种脚本语

    2020/03/24
  • GraphQL 项目中的前端 mock 方案基础入门_工具使用说明

    在使用 GraphQL (以下简称 gql)的前端项目中,往往需要等待后台同学定义好 Schema 并架设好 Playground 以后才能进行联调。如果后台同学阻塞了,前端只能被动等待。如果对于 gql 项目来说也能够和 REST 一样有一套 mock 方案就好了。经过一系列实践,我选择了 mocker-api 加 Apollo 的方案来实现。mocker

    2020/03/26
  • js之map及转换json、Object使用攻略_json基础知识

    搞后段HashMap用的还是很多,其实js里也有提供了map。搞一段map怎么玩let map = new Map()
    map.set(‘a’,’a’)
    map.set(‘b’,’b’)
    console.log(map)
    console.log(map.get(‘a’))
    以上简单的创建了一个map,显然存值用set、取值用get,和java 的还是蛮相似

    2020/03/24
  • VueJS 实际开发中会遇到的问题小白常识_vue作者: 熊D01001小白教程

    由于公司的前端开始转向 VueJS,最近开始使用这个框架进行开发,遇到一些问题记录下来,以备后用。主要写一些 官方手册 上没有写,但是实际开发中会遇到的问题,需要一定知识基础。涉及技术栈CLI: Vue-CLIUI: ElementHTML: Pug(Jade)CSS: LessJavaScript: ES6正文:polyfill 与 transform-r

    2020/04/06
  • strobe.cool零基础入门_可以让你产生幻觉,看世界的视觉

    strobe.cool零基础入门 官方网址:https://strobe.cool/ 简介描述:可以让你产生幻觉,看世界的视觉 如果想要换种看世界的视觉,不妨试试这个网站给你带来的…

    2020/03/08
  • 郑州网站建设告诉你移动端网站关键词怎么优化新手入门_网站入门知识

    郑州网站建设告诉你移动端网站关键词怎么优化?现在人人都要用手机,手机已经成为我们生活中不可或缺的一部分,随着互联网的发展,移动端也越来越重要了移动端网站关键词怎么优化?随着现在互联网的快速发展,据目前的用户搜索习惯来看,移动端网站的索引已经开始优先于PC端网站的索引了,移动端的优质流量开始远远大于PC端了,很多企业都开始关注移动端关键词排名,移动端和PC端排

    2020/04/03
  • 架构师教你如何设计一个高并发系统?大多程序员都收藏了菜鸟教程_架构入门基础教程

    面试剖析其实所谓的高并发,如果你要理解这个问题呢,其实就得从高并发的根源出发,为啥会有高并发?为啥高并发就很牛逼?我说的浅显一点,很简单,就是因为刚开始系统都是连接数据库的,但是要知道数据库支撑到每秒并发两三千的时候,基本就快完了。所以才有说,很多公司,刚开始干的时候,技术比较 low,结果业务发展太快,有的时候系统扛不住压力就挂了。当然会挂了,凭什么不挂?

    2020/03/26
  • vuex小白常识_一个专门为 Vue.js 应用所设计的集中式状态管理架构

    vuex小白常识 官方网址:http://vuex.vuejs.org/ GitHub:https://github.com/vuejs/vuex 简介描述:一个专门为 Vue.j…

    2020/03/06