黑马程序员技术交流社区

标题: 【上海校区】未来的组件化标准 —— 浅尝Web Components [打印本页]

作者: 不二晨 时间: 2018-9-29 09:29
标题: 【上海校区】未来的组件化标准 —— 浅尝Web Components
前言Web Components涉及到的内容还是很多的，每一块都有很多东西可以讲，国外的好多大佬已经产出了好多优秀的文章。本文照常只是简单了解大致内容而不进入深究，了解且会用即可，浅尝辄止。
简介Web Components本身不是一个规范，而是由W3C提出的另外4个规范的合集。这四个规范是：

下面我们走马观花，简单了解一个这四个东西。
HTML Template之前的页面开发经常的一个做法是把模板放在一个script标签或者隐藏的div中，用的时候通过innerHTML取出，塞进数据，然后放回页面显示。现在我们可以通过<template>标签存放了。就像这样：
<template id="mytemplate"> <img src="" alt="great image"> <div class="comment"></div></template>复制代码特性检测要特性检测 <template>，可以创建一个 template 元素并检查它是否拥有 content 属性：
function supportsTemplate() { return 'content' in document.createElement('template');}if (supportsTemplate()) { // 检测通过！} else { // 使用旧的模板技术或库。}复制代码激活模板激活模板，即渲染出模板里面的内容。激活模板最简单的方法就是使用document.importNode() 对模板的 .content 进行深拷贝。.content 为只读属性，关联一个包含模板内容的 DocumentFragment。
var t = document.querySelector('#mytemplate');// 在运行时填充 src。t.content.querySelector('img').src = 'logo.png';var clone = document.importNode(t.content, true);document.body.appendChild(clone);复制代码特点用 <template> 来包裹内容为我们提供了几个重要属性：

它的内容在激活之前一直处于惰性状态。本质上，这些标记就是隐藏的 DOM，它们不会被渲染。
处于模板中的内容不会有副作用。脚本不会运行，图片不会加载，音频不会播放，...直到模板被使用。
内容不在文档中。在主页面使用 document.getElementById() 或 querySelector() 不会返回模板的子节点。
模板能够被放置在任何位置，包括 <head>，<body>，或 <frameset>，并且任何能够出现在以上元素中的内容都可以放到模板中。注意，"任何位置"意味着 <template> 能够安全的出现在 HTML 解析器不允许出现的位置...几乎可以作为任何内容模型的子节点，它也可以作为 <table> 或 <select> 的子元素。

推荐阅读

HTML Imports之前在页面引入另一个页面或片段往往是通过iframe或者ajax异步加载，而现在我们可以这样做：
在head中引入
<head> <link rel="import" href="/path/to/imports/stuff.html"></head>复制代码js中获取
var content = document.querySelector('link[rel="import"]').import;复制代码特性检测要检测浏览器是否支持导入，可验证 <link> 元素上是否存在 import：
function supportsImports() { return 'import' in document.createElement('link');}if (supportsImports()) { // 支持导入} else { // 使用其他方法加载文件}复制代码推荐阅读

Shadow DOM首先需要设置一下：打开开发者工具，f1打开设置(或右上角三个点)，然后勾上Show user agent shadow DOM ——

然后再看下，video标签是这样的 ——

甚至一个普通的input ——

之前被隐藏掉的DOM部分就是shadow DOM。顾名思义，它是其宿主元素的影子，通常用来封装组件的内部结构。
所以像video、audio甚至input都是用简单的元素封装的组件。
这让我想到，我们是不是可以通过修改元素里面的shadow DOM的样式来改变该元素的样式呢？答案是 —— 是的，但也不完全是...

从上图audio标签的结构和浏览器默认样式可以看到，我们可以像这样修改对应的样式：
audio::-webkit-media-controls { ...}复制代码就像通过::-webkit-scrollbar改造浏览的滚动条样式那样，
于是，默认的audio样式(新版chrome)——

经过改造后，可以变成这样——

然而并不是所有样式都可以这样覆盖改造，像pseudo="-internal-media-controls-loading-panel"这样以"-internal-"开头的是不可以的。所以这个做法还是有很大局限性的。

这是我试出来的，并没发现相关标准或依据...
作者: 不二晨 时间: 2018-10-10 13:26
奈斯

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2