前言

Web Component不是新东西，几年前的技术，但是受限于浏览器兼容性，一直没有大规模应用在项目里，直到现在（2018年年末），除IE仍不支持之外，其它主流浏览器都支持Web Component。

Web Component不是一个东西，它分为四部分，分别是

template——模板
HTML import——HTML导入
Shadow DOM——影子DOM
Custom Elements——自定义元素

template

前端模板也不是个新概念，templatejs、ejs等模板引擎早就将模板的概念深入人心，在纯HTML世界里，我们通常把模板写在script标签里，将type改为text/html，避免浏览器解析，像这样

<script type="text/html">

	<div>

		<title>标题</title>

		<content>内容</content>

	</div>

</script>

template则是用标签包裹模板内容，不同之处在于获取模板内容的方式，script模板是通过获取script的innerHTML来获取，template则是获取读取template节点的content属性来获取

// 模板文件

<template>

	<div>

		<title>标题</title>

		<content>内容</content>

	</div>

</template>


// 获取模板内容

console.log(document.querySelector('template').content);

HTML import

在此之前，HTML导入一般用iframe嵌套或依赖后端又或是其他库，HTML import为原生HTML提供了导入HTML文件的功能，使用link标签，rel设置为import，href为被导入文件路径

<link rel="import" href="header.html">

HTML导入之后不会立即被浏览器解析并渲染，需要手动插入到DOM节点，这点跟css不同

// header.html

<h2 id="header">这是公共header</h2>

<h2 id="footer">这是公共footer</h2>

// index.html

<html>

	<head>

		<link rel="import" href="header.html">

	</head>

	<body>

		<content>内容区</content>

		<script type="text/javascript">

			let importDom = document.querySelector('link[href="header.html"]').import;

			let content = document.querySelector('content');

			let header = importDom.querySelector('#header');

			let footer = importDom.querySelector('#footer');

			document.body.insertBefore(header, content);

			document.body.appendChild(footer);

		</script>

	</body>

</html>

最终渲染结果

这是公共header

内容区

这是公共footer

Web Component的更多相关文章

  1. Web Component 文章

    周末无意中了解了Web Component的概念. http://blog.amowu.com/2013/06/web-components.html http://www.v2ex.com/t/69 ...

  2. 示例可重用的web component方式组织angular应用模块

    在online web应用中,经常有这样的需求,能够让用户通过浏览器来输入代码,同时能够根据不同的代码来做语法高亮.大家已知有很多相应的javascript库来实现语法高亮的功能,比如codemirr ...

  3. Web Component总结

    Web Component 一个Web组件通常由四个部分组成:模板.Shadow DOM.自定义元素与打包,其中Shadow DOM解决了组件在页面中的封装问题 Shadow DOM 有shadow ...

  4. Salesforce知识整理（一）之Lightning Web Component Tools

    目录 LWC知识整理(一) 工具 Salesforce CLI Visual Studio Code(VS Code) Developer Hub(Dev Hub) 开启Dev Hub 相关资料 茶余 ...

  5. Web Component探索

    概述 各种网站往往需要一些相同的模块,比如日历.调色板等等,这种模块就被称为“组件”(component).Web Component就是网页组件式开发的技术规范. 采用组件进行网站开发,有很多优点. ...

  6. angular custom Element 自定义web component

    angular 自定义web组件: 首先创建一个名为myCustom的组件. 引入app.module: ... import {customComponent} from ' ./myCustom. ...

  7. amazeui学习笔记二（进阶开发2）--Web组件简介Web Component

    amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...

  8. 使用纯粹的JS构建 Web Component

    原文链接:https://ayushgp.github.io/htm...译者:阿里云 - 也树 Web Component 出现有一阵子了. Google 费了很大力气去推动它更广泛的应用,但是除 ...

  9. how to create one single-file Web Component just using the HTML, CSS, JavaScript

    how to create one single-file Web Component just using the HTML, CSS, JavaScript web components html ...

随机推荐

  1. 解决在编程方式下无法访问Spark Master问题

    我们可以选择使用spark-shell,spark-submit或者编写代码的方式运行Spark.在产品环境下,利用spark-submit将jar提交到spark,是较为常见的做法.但是在开发期间, ...

  2. bzoj 1076

    发现自己已经把期望dp忘光了... 其实本质上非常简单,就是利用状压的思想跑期望 首先很容易设计出状态:记状态f[s][i]表示到了第i个点,之前已选过的点的状态为s时所能获得的最大期望得分 但是会发 ...

  3. 解决linux下svn update 产生Node remains in conflict的问题

    提交一个文件 服务器上死活更新不了 是因为有冲突,解决办法:svn revert --depth=infinity /var/SvnProject/APITest 再次执行更新 进有改动的文件夹,更新 ...

  4. AI-解析器-request.data内部如何按照自定义解析格式-解析数据

    QUESTION:post方法中调用request.data方法时,当在Courseview类中添加parser_classes=[ForParser,],就可以将数据解析成parser_classe ...

  5. 将眼底图片生成的txt文件进行格式化处理

    # -*- coding: utf-8 -*- """ 将图片转换生成的txt文件进行格式化处理 """ import os import ...

  6. 函数select、poll

    函数select select函数: int select(int nfds, fd_set *readfds, fd_set *writefds, fd_set *exceptfds, struct ...

  7. 虚拟机设置静态IP与配置网络

    不废话,直接上图 一:先配置虚拟机的网络 二:配置win10-VM8网络 三:查看以太网的ip信息,直接在管理员命令中输入 ipconfig /all可以到连接信息 四:如果在上面找不到VM8的网络信 ...

  8. 调整Windows操作系统下时间同步的频率

    今天发现时间不对,同步时间后看到Windows系统默认是一周才同步一次时间,频率太低了.查找了一下资料,找到了两种调整Win7时间同步频率的方法. 方法一:注册表法 这种方法是通过修改注册表中的键值来 ...

  9. Redis的搭建和Redis的集群搭建

    1.Redis的官网:https://redis.io/      Redis的测试网站:http://try.redis.io/ 2.参考博客:https://www.cnblogs.com/maf ...

  10. eclipse工具下hadoop环境搭建

    eclipse工具下hadoop环境搭建:    window10操作系统中搭建eclipse64开发系统,配置hadoop的eclipse插件,让eclipse可以查看Hdfs中的文件内容.     ...