提交其他未完成的demo

2fps · May 26, 2019 · 60c66a7 · 60c66a7
1 parent 96d26d4
commit 60c66a7
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 0 deletions.
diff --git a/view/2019/05/chrome下rem单位与12px问题/index.html b/view/2019/05/chrome下rem单位与12px问题/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+<style>
+html {
+    font-size: 10px;
+}
+span {
+    font-size: 1.6rem;
+}
+div {
+    width: 10rem;
+    height: 10rem;
+}
+</style>
+</head>
+<body>
+    <span>字体能够渲染正确</span>
+    <div>宽高渲染则时以最小12px为准</div>
+</body>
+</html>
diff --git a/view/2019/05/写一个简单的web components组件/index.html b/view/2019/05/写一个简单的web components组件/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+<body>
+    <span class="coloured">123</span>
+    <i-button type="round">
+        <span slot="button-name">this is a button</span>
+    </i-button>
+</body>
+<template>
+    <style>
+    </style>
+    <button id="name" class="round">
+        <slot name="button-name"></slot>
+    </button>
+</template>
+<script>
+class Button extends HTMLElement {
+    constructor() {
+        super();
+        const template = document.querySelector('template').content;
+        const shadowRoot = this.attachShadow({mode: 'closed'}).appendChild(template.cloneNode(true));
+
+        if (this.getAttribute('type') == 'round') {
+
+        }
+    }
+    connectedCallback() {
+    }
+}
+
+window.customElements.define('i-button', Button);
+
+
+
+
+
+
+
+
+
+
+
+
+/* 
+(function() {
+    // Creates an object based in the HTML Element prototype
+    // 基于HTML Element prototype 创建obj
+    var element = Object.create(HTMLElement.prototype);
+    // 获取特mplate的内容
+    var template = document.currentScript.ownerDocument.querySelector('template').content;
+    // element创建完成之后的回调
+    element.createdCallback = function() {
+        // 创建 shadow root
+        var shadowRoot = this.createShadowRoot();
+        // 向root中加入模板
+        var clone = document.importNode(template, true);
+        shadowRoot.appendChild(clone);
+    };
+    document.registerElement('hellow-world', {
+        prototype: element
+    });
+}()); */
+</script>
+</html>