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>

新时代web组件开发标准的更多相关文章

  1. amazeui学习笔记二（进阶开发5）--Web 组件开发规范Rules

    amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...

  2. Web前端开发标准规范

    web前端开发规范的意义 提高团队的协作能力 提高代码的复用利用率 可以写出质量更高,效率更好的代码 为后期维护提供更好的支持 一.命名规则 命名使用英文语义化,禁止使用特殊字符,禁止使用拼音,禁止使 ...

  3. WEB组件 开发 （未完成 4-13）

    整理自真阿当的阿当大话西游之WEB组件,课件中的代码下载. 14. 抽出widget类 组件分两大类: utility(大部分与UI无关的组件) 和 widget(应用层,大部分与UI相关的,日历组件 ...

  4. web组件开发入门

    本文是学习慕课网阿当大话西游之WEB组件后的一个总结. 组件的分类 1 框架组件:依赖于某种框架的组件 2 定制组件:根据公司业务定制的组件 3 独立组件:不依赖框架的组件 定义和加载组件 解决css ...

  5. stenciljs 学习一 web 组件开发

    stenciljs 介绍参考官方网站,或者 https://www.cnblogs.com/rongfengliang/p/9706542.html 创建项目 使用脚手架工具 npm init ste ...

  6. Web前端开发中的MCRV模式(转)

    作者: izujian  来源: baiduux 摘要:针对前端开发中基于ajax的复杂页面开发所面临的代码规模大,难以组织和维护,代码复用性.扩展性和适应性差等问题,本文尝试以MVC思想为 基础,结 ...

  7. WebAssembly，Web的新时代

    在浏览器之争中,Chrome凭借JavaScript的卓越性能取得了市场主导地位,然而由于javascript的无类型特性,导致其运行时消耗大量的性能做为代价,这也是JavaScript的瓶颈之一.W ...

  8. 从徐飞的文章《Web应用的组件化开发（一）中窥视web应用开发的历史

    Web应用的组件化开发(一) 原文来自 徐飞 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其目的.绝大多数软件产品是追 ...

  9. SpringMVC内容略多 有用 熟悉基于JSP和Servlet的Java Web开发，对Servlet和JSP的工作原理和生命周期有深入了解，熟练的使用JSTL和EL编写无脚本动态页面，有使用监听器、过滤器等Web组件以及MVC架构模式进行Java Web项目开发的经验。

    熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器.过滤器等Web组件以及MVC架构 ...

随机推荐

  1. CentOS 6.5升级到CentOS 7

    CentOS7 已经发布了,之前一直想在上面测试一下,一直没有机会,这次终于可以感受一下CentOS7了.一直使用CentOS6.5有一段时间了,但是由于它的内核版本依然停留在2.6.32,所以决定升 ...

  2. UI：多线程 、用GCD创建线程

    什么是应用(程序):就是我们编写的代码编译后生成的app文件 进程:凡是一个运行的程序都可以看作为一个进程,如打开的多个 word,就可以认为是一个进程的多个线程. 线程:至少有一个线程就是主线程,网 ...

  3. linux 下 读取某个文件的某一行或者某几行

    wc -l  a.txt  统计a.txt 行数 查看文件a.txt的第190行到196行, sed -n '190,196p' a.txt  如果查看某一行用 sed -n 'a,bp' a.txt ...

  4. jqGrid 编辑完数据后能返回到当前位置的方法

    jqGrid 是一个js的jquery组件,虽然不轻便,但功能还是蛮强大的,也比较方便使用.在数据加载后,经常需要对其中的记录进行编辑,修改完后再返回时需要看到修改后的数据,一般采取重新加载的方法re ...

  5. bzoj 2927: [Poi1999]多边形之战【博弈论】

    先手必胜状态是黑三角在边上 然后其他情况脑补一下,n为偶数先手必胜,可以理解为从某一边取,先手总有办法让后手取得一边有奇数个 #include<iostream> #include< ...

  6. 基于 CODING 轻松搞定持续集成

    点击观看视频教程 带你一步一步搞定 CODING 持续集成 持续集成加速软件交付 持续集成这个概念是由 Grady Booch 在 1991 年首次提出,随后成为了 DevOps 的核心实践之一.持续 ...

  7. 黑客攻防技术宝典web实战篇：查找源代码中的漏洞习题

    猫宁!!! 参考链接:http://www.ituring.com.cn/book/885 随书答案. 1. 列出 3 种可在源代码中找到明确签名的常见漏洞. (a) 跨站点脚本(b) SQL 注入( ...

  8. hbuilder 中文乱码

    这是因为HBuilder默认文件编码是UTF-8,你可以在工具-选项-常规-工作空间选项中设置默认字符编码

  9. 502 IPO 上市

    详见:https://leetcode.com/problems/ipo/description/ C++: class Solution { public: int findMaximizedCap ...

  10. CZ-python01-06

    练习代码 练习代码 # Python注释 # 注释不是越多越好,对于一目了然的代码,不需要添加注释 # 对于复杂的操作,应该在操作开始填上若干行注释 # 对于不是一目了然的代码,应在其行尾添加注释(为 ...