前言

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. Confluence 6 附件存储选项

    在早期的 Confluence 版本中,我们允许存储附件到 WebDav 或者 Confluence 数据库中.针对新的 Confluence 安装,我们不再支持这 2 种存储了. 本地文件系统 在默 ...

  2. Android “Command” from work summary

    总结一下Android中的命令. 一.adb 与 shell ADB的全称为Android Debug Bridge(调试桥).是一个适用命令行工具,用来与模拟器实例或链接的Android设备进行通信 ...

  3. Ionic3.0 输入状态时隐藏Tabs栏

    刚接触ionic3 不久 ,发现遍地都是坑,昨天遇到一个问题就是当键盘弹起的时候tabs 也被 弹了起来,最初预想是放在tabs 的一个子页面内处理这个问题, Tabs隐藏后,我们发现底部有部分空白, ...

  4. mongodb基类封装实例

    mongodb的基类 1 <?php 2 3 namespace BI\Service\MongoDB; 4 5 use MongoDB\Driver\BulkWrite; 6 use Mong ...

  5. 断路器Ribbon

    断路器:就是对服务访问不到的情况做出自己的错误,也就是故障转移(将当前出现故障的请求重新返回特定消息) 改造消费者项目(RibbonDemo) 1.在pom.xml中引入hystrix的jar包 &l ...

  6. SpringMVC文件下载与JSON格式

    点击查看上一章 现在JSON这种数据格式是被使用的非常的广泛的,SpringMVC作为目前最受欢迎的框架,它对JSON这种数据格式提供了非常友好的支持,可以说是简单到爆. 在我们SpringMVC中只 ...

  7. java和python对比----实例化的对象属性:

    python 可以直接对实例化的属性进行赋值 class Test(): name = "小明" def __init__(self):{ //self.name = name; ...

  8. Java 9 中的 9 个新特性你知道吗

    摘要: Java 8 发布三年多之后,即将快到2017年7月下一个版本发布的日期了. 你可能已经听说过 Java 9 的模块系统,但是这个新版本还有许多其它的更新. 这里有九个令人兴奋的新功能将与 J ...

  9. Haproxy重刷一次

    centos上,yum安装,完全无难度. 只是设置时,要注意一下跳转,和nginx规则差不多. https://blog.csdn.net/qq_28710983/article/details/82 ...

  10. 安装和强行卸载fuse

    先卸载 yum list fuse yum --setopt=tsflags=noscripts remove fuse.x86_64 安装 yum install automake gcc-c++ ...