新时代web组件开发标准
2024-09-05 06:21:46
VUE框架,则是遵行了这个标准。
1、html文件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>My First WebComponent</title>
<link rel="import" href="components/favorite-colour.html" />
</head>
<body>
<favorite-colour></favorite-colour>
</body>
</html>
2、模板文件
<!-- WebComponent example based off element-boilerplate: https://github.com/webcomponents/element-boilerplate -->
<template>
<style>
.coloured {
color: red;
}
</style>
<p>My favorite colour is: <strong class="coloured">Red</strong></p>
</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('favorite-colour1', {
prototype: element
});
}());
</script>
最新文章
- 2.WindowsServer2012R2装完的一些友好化设置
- js+css实现骰子的随机转动
- [POJ2151]Check the difficulty of problems (概率dp)
- android中的广播接收实现总结
- iOS - JSON 数据解析
- X Window 设定介绍
- 【转】GCC编译使用动态链接库
- OWA修改密码注意事项
- 装多版本号sqlserver的远程连接问题
- 如何让DbGrid支持鼠标滚轮滚动
- Python眼睛护士改进版
- Web API之消息处理管道
- HTTP状态码含义
- 笨方法学python--变量和命名
- Android学习之Animation(二)
- 和菜鸟一起学linux之initramfs方式启动
- IT人员必须掌握的10项软技能
- vue中嵌套页面 iframe 标签
- [ 9.24 ]CF每日一题系列—— 468A构造递推
- ES系列八、正排索Doc Values和Field Data