![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Web Components
文章平均质量分 80
2008winstar
这个作者很懒,什么都没留下…
展开
-
创建自定义的Polymer元素
要创建一个新的Polymer元素,需要:1 加载polymer.html(Polymer的核心)。2 使用声明自定义的元素。在下面的示例中,定义了一个元素,使用HTML Import加载polymer.html依赖,然后将该页面保存为my-element.html。my-element.html Hello from my-eleme翻译 2015-01-27 19:51:40 · 637 阅读 · 0 评论 -
HTML template
<template>标签元素template元素用于声明HTML片段,该HTML片段可以通过脚本(script)被克隆以及插入到文档中。而在浏览器的渲染过程中,template元素内的内容是不会被渲染的。 template.content:返回template标签内的内容,该内容存储在与另外一个Document关联的文档片段中(Document Fragment...原创 2014-12-14 17:08:44 · 503 阅读 · 0 评论 -
Web Components
Web Components是一系列前沿的规范,它使得:1 构建组件(widgets)成为可能;2 重用更为可靠3 。。。 Web Components由四个模块组成:Shadow DOM - 提供DOM和样式的封装HTML Templates(HTML 模板) - 提供可复用的DOM元素作为脚手架Custom Elements(自定义元素)- 扩展HTML已有...原创 2014-12-14 16:59:56 · 93 阅读 · 0 评论 -
HTML import
<link rel="import" href="">1、使用link标签导入2、link标签的rel属性值为import3、link标签的href属性值为需要导入的资源<!DOCTYPE html><html> <head> <title>Demo</title&原创 2014-12-09 21:21:22 · 1067 阅读 · 0 评论 -
Custom Element
Custom Element自定义标签 两个硬性要求:1、标签名必须带横杠'-',如<my-tag>2、其prototype扩展自HTMLElement 注册自定义标签:document.registerElement(tagName, prototype); Demo:<template> <!-- Full of...原创 2014-12-19 23:30:55 · 75 阅读 · 0 评论 -
Shadow DOM获取Shadow host的内容
在Shadow DOM(二)中,介绍了与Shadow DOM相关的概念,包括Shadow host等等。本文将重点介绍如何将Light DOM中的内容传到Shadow DOM中。而在Shadow DOM 与HTML Templates一文的示例中可以看到Shadow host: Hello World!的内容在该节点创建并附加Shadow Root后并没有在浏览器中得到渲染,也就是说Sha原创 2015-02-06 21:33:43 · 2527 阅读 · 0 评论 -
HTML Templates
HTML TemplatesHTML Templates相当于模板,它提供了可复用重用的DOM结构块,在模板内容的DOM块跟普通的HTML DOM结构块没有什么区别。1 定义(声明)HTML Templates,定义/声明HTML Templates,需要借助新的标签,如下示例: This is the description for ...可原创 2015-01-17 20:01:33 · 909 阅读 · 0 评论 -
Shadow DOM 与 HTML Templates
在之前的Web Components系列文章中,简单介绍了Web Components概要,HTML Templates,Shadow DOM,Shadow DOM(二)。本文将在此基础上,介绍Shadow DOM与HTML Templates如何一起协作。在Shadow DOM(二)中,介绍了如何创建Shadow DOM:通过调用createShadowRoot()方法创建root节原创 2015-02-05 23:01:44 · 1138 阅读 · 0 评论 -
Web Components
Web Components 概述Web Components是W3C目前正在制定的一系列前沿规范,其目的是希望基于HTML、CSS与JavaScript的开发能够实现以下的目标:1、开发者可以根据业务需求,综合使用HTML、CSS和JavaScript来创建自定义的HTML元素、扩展原有(原生)的HTML,构建自己的组件(widgets);2、解决样式、脚本的作用域(影响范围)问题,原创 2015-01-17 19:08:55 · 987 阅读 · 0 评论 -
Shadow DOM(二)
在前一篇博文中,简单地介绍了Shadow DOM是什么。本文,将重点介绍Shadow DOM能做什么、如何创建Shadow DOM以及Shadow DOM的相关概念。Shadow DOM 能做什么简单地说,有了Shadow DOM(若浏览器支持该规范),开发者可以封装HTML标签,CSS样式以及JavaScript,提供一个新的作用域空间。Shadow DOM结合后续将介绍的其他Web原创 2015-02-04 21:37:33 · 2135 阅读 · 1 评论 -
Shadow DOM
Shadow DOM是什么Shadow DOM是Web Components规范中的一个组成部分。Web Components的概要介绍,可以参考之前的几篇博文:Web Components概述、HTML Templates。在介绍Shadow DOM之前,可以先看一个例子。新建一个HTML页面,代码如下: Demo 在浏览器中原创 2015-02-01 23:06:03 · 3568 阅读 · 0 评论 -
Shadow DOM
Shadow DOMShadow HostShadow RootShadow Boundary 创建一个shadow DOM:选择一个元素然后调用createShadowRoot()方法,这样将返回一个文档片段(document fragment),可以在这个文档片段上添加内容。调用createShadowRoot()方法的这个元素,称为Shadow Host。S...原创 2014-12-14 19:37:33 · 122 阅读 · 0 评论