web components简介

xiaoxiao2021-02-28  137

来源webcomponents 官网简介,用于个人理解 polymer基于此开发。 angular 不是。

简介

什么是web components?

是浏览器的一部分,浏览器需支持。通过一些列web平台的APIs让你创造,定制,用于在web网页中的HTML标签。create new custom, reusable, encapsulated HTML tags基于Web Component 标准定制的 components and widgets直接用于浏览器,可以搭配任何使用HTML的JS库或框架扩展HTML的elements

主要构成 custom elements 新的DOM elements Shadow DOM 封装风格和标记 encapsulated style and markup HTML imports inclusion and reuse HTML documents HTML Template 在页面加载中声明未使用的标记片段

如何使用 常用的是直接在html页面导入即可

<link rel="import" href="../emoji-rain/emoji-rain.html"> ... <emoji-rain active></emoji-rain>

如何定义 a new HTML element

目前V1版本,customElements.define()

class AppDrawer extends HTMLElement {...} window.customElements.define('app-drawer', AppDrawer);

使用

<app-drawer></app-drawer>

或者可以在页面中声明,在JS中创建,甚至可以监听

<script> // 创建JS var newDrawer = document.createElement(‘app-drawer’); // 加入页面 document.body.appendChild(newDrawer); // 链接listeners document.querySelector(‘app-drawer’).addEventListener(‘open’, function() {...}); </script>`
转载请注明原文地址: https://www.6miu.com/read-38197.html

最新回复(0)