您的位置：首页 > 其它

Web Components 未来的组件化标准

2016-03-04 17:21 155 查看

Web Components

Web Components

是未来的组件化标准。

每个组件封装它自已的 HTML 结构、CSS 样式、JS 代码，不会影响页面其他元素。

Show me the code

components/my-list.html

<template>
<style>
ul {
padding: 0;
margin: 0;
list-style-type: none;
color: #ddd;
font-size: 100px;
text-align: center;
}
ul li {
transition: .5s;
}
.color1:hover {
color: red;
margin-left: 100px;
}
.color2:hover {
color: green;
margin-left: 100px;
}
.color3:hover {
color: blue;
margin-left: 100px;
}
.color4:hover {
color: yellow;
margin-left: 100px;
}
</style>
<ul>
<ul>
<li class="color1">床前明月光</li>
<li class="color2">疑是地上霜</li>
<li class="color3">举头望明月</li>
<li class="color4">低头思故乡</li>
</ul>
</ul>
</template>

<script>
(function() {
// Creates an object based in the HTML Element prototype
var element = Object.create(HTMLElement.prototype);

// Gets content from <template>
var template = document.currentScript.ownerDocument.querySelector('template').content;
// Fires when an instance of the element is created

element.createdCallback = function() {
// Creates the shadow root
var shadowRoot = this.createShadowRoot();

// Adds a template clone into shadow root
var clone = document.importNode(template, true);
shadowRoot.appendChild(clone);
};

document.registerElement('my-list', {
prototype: element
});
}());
</script>

index.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Web Components</title>
<link rel="import" href="components/my-list.html" />
<style>
html,body {margin: 0; padding: 0;}
body {background-color: #000;}
</style>
</head>
<body>
<!-- 自定义标签 -->
<my-list></my-list>
</body>
</html>

按

F12

看 HTML 结构就顿悟一半了

兼容性

Have a long way to go，这一辈子是看不到普及的那一天了

Polymer

Polymer 是基于 Web Components 的一个框架，Google 的。

简洁的核心库保证了开发高性能,美观,可共用的 web components 变得前所未有的高效.如果你还没有碰过 Polymer,那现在可以放心的拥抱它了!如果你已经好久没有关注 Polymer, 那士别三日, 刮目相看.

这简介，都没人用还装逼。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航