zoukankan      html  css  js  c++  java
  • 新时代web组件开发标准

    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>
  • 相关阅读:
    Docker
    Web
    爬虫
    Python
    软件脱壳
    网络抓包
    HTTPS单向认证,双向认证
    新版无完整背景图片滑块验证码
    Frida Hook
    闭包函数与装饰器
  • 原文地址:https://www.cnblogs.com/zhaodagang8/p/10960651.html
Copyright © 2011-2022 走看看