WebComponents001
Sample1: ShadowDom 隔离style,替换显示内容
<button>Hello, world!</button>
<script>
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.innerHTML = '<style>div{background-color : blue;}</style> <div>Hi, you are great!</div>';
</script>
<style>
div {
background-color : green;
}
</style>
<div>Outside Element</div>
Sample 2: 通过Template给shadow Dom设置内容, 注意template中的script的作用域是全局的,style的作用域是shadow dom局部
<button>Hello, world!</button>
<div>Outside Element</div>
<template id="t1">
<style>div{background-color : blue;}</style>
<div>Hi, you are great!</div>
<script>
//此处脚本不会被执行
var d = document.querySelector('div');
d.onclick = function(){
alert("Hi");
}
</script>
</template>
<script>
var host = document.querySelector('button');
var root = host.createShadowRoot();
var t = document.querySelector("#t1");
//通过innerHTML给shadow dom赋值,不会执行template中的script
root.innerHTML = t.innerHTML;
</script>
<style>
div {
background-color : green;
}
</style>
Sample 3: 为template中的content嵌入子节点。子节点的style受外部css的直接控制,但是会继承shadow dom中父节点的style
<div id="hostNode"><div>Hello, world!</div></div>
<div>Outside Element</div>
<template id="t1">
<style>div{background-color : blue; font-size: 30px;}</style>
<div>Hi, you are great!</div>
<div>
<content></content>
</div>
</template>
<script>
var host = document.querySelector('#hostNode');
var root = host.createShadowRoot();
var t = document.querySelector("#t1");
var content = t.content;
root.appendChild(document.importNode(content,true));
</script>
<style>
div {
background-color : green;
font-size: 40px;
}
#mytext {
background-color : red;
}
</style>
sample 4:带有select的content
<div id="hostNode">
<div class="kk">Hello, kk world!</div>
<div class="hh">Hello, hh world!</div>
</div>
<div>Outside Element</div>
<template id="t1">
<style>div{background-color : blue; font-size: 30px;}</style>
<div>Hi, you are great!</div>
<div>
<content select=".hh"></content>
分割<br>
<content select=".kk"></content>
</div>
</template>
<script>
var host = document.querySelector('#hostNode');
var root = host.createShadowRoot();
var t = document.querySelector("#t1");
var content = t.content;
root.appendChild(document.importNode(content,true));
</script>
<style>
div {
background-color : green;
font-size: 40px;
}
#mytext {
background-color : red;
}
</style>
WebComponents001的更多相关文章
随机推荐
- MapRudecer
MapReducer基本概念 Mapreduce是一个分布式运算程序的编程框架,是用户开发“基于hadoop的数据分析应用”的核心框架: Mapreduce核心功能是将用户编写的业务逻辑代码和自带默认 ...
- linux安装oracle远程客户端
文章参考:http://blog.csdn.net/caomiao2006/article/details/11901123 感谢博友分享O(∩_∩)O~ 安装oracle 远程客户端(一般情况下本地 ...
- Tapestry 权威讲解-备份
http://blog.csdn.net/mindhawk/article/details/5021371#introduction
- android开源项目之OTTO事件总线(二)官方demo解说
官方demo见 https://github.com/square/otto 注意自己该编译版本为2.3以上,默认的1.6不支持match_parent属性,导致布局文件出错. 另外需要手动添加an ...
- Jmeter学习(三)
Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试.(来自百度) jmeter的特点: 开源免费. ...
- Word2Vec词向量(一)
一.词向量基础(一)来源背景 word2vec是google在2013年推出的一个NLP工具,它的特点是将所有的词向量化,这样词与词之间就可以定量的去度量他们之间的关系,挖掘词之间的联系.虽然源码是 ...
- 感知机学习算法(PLA)
Perception Learning Algorithm, PLA 1.感知机 感知机是一种线性分类模型,属于判别模型. 感知机模型给出了由输入空间到输出空间的映射: f(X) = sign(WTX ...
- Flask 学习笔记(二):RESTful API
概括 URL:需要操作的对象,也就是资源 HTTP method:我要对该对象做什么(POST 增.DELETE 删.GET 查.PUT 和 PATCH 改) HTTP status code:操作的 ...
- 利用calibre抓取新闻
Adding your favorite news website calibre has a powerful, flexible and easy-to-use framework for dow ...
- Promise使用手册
导读 Promise问世已久, 其科普类文章亦不计其数. 遂本篇初衷不为科普, 只为能够温故而知新. 比如说, catch能捕获所有的错误吗? 为什么有些时候会抛出"Uncaught (in ...