当前位置: Chrome插件首页 > 开发者插件 > Web Components Chrome插件

Web Components Chrome插件

插件分类:开发者插件
直达下载

Web Components Chrome插件图文教程

Web Components插件概述

作为开发人员,我们都知道尽可能地重用代码是一个好主意。传统上,对于自定义标记结构而言,这并不容易。考虑一下有时需要编写复杂的HTML(以及相关的样式和脚本)来呈现自定义UI控件,以及多次使用它们会使页面陷入混乱的情况如果您不小心的话。Web Components旨在解决此类问题。它由三项主要技术组成,可以一起使用以创建具有封装功能的通用自定义元素,这些元素可以在任何需要的地方重复使用而不必担心代码冲突。
Web Components插件概述

Web Components插件功能

自定义元素:一组JavaScript API,可让您定义自定义元素及其行为,然后可以根据需要在用户界面中使用它们。
Shadow DOM:一组JavaScript API,用于将封装的“ shadow” DOM树附加到元素(与主文档DOM分开呈现)并控制关联的功能。这样,您可以将元素的功能设为私有,因此可以编写脚本和设置样式,而不必担心与文档的其他部分发生冲突。
HTML模板:<template>和<slot>元素使您可以编写未在渲染页面中显示的标记模板。然后,可以将这些作为自定义元素结构的基础进行多次重用。

Web Components插件下载安装

1.你可以从chrome应用商店里找到Web Components插件,如果你的chrome应用商店无法打开,你可以在本站的下方找到Web Components插件下载地址,当然你也可以借助于或者其他手段访问chrome应用商店。
2.离线安装的方法参照一下方法:老版本chrome浏览器,首先在标签页输入【chrome://extensions/】进入chrome扩展程序,解压你在本站下载的插件,并拖入扩展程序页面,它会提示你是否安装该插件,点击添加即可。
3.最新版本的chrome浏览器直接拖放安装时会出现“程序包无效CRX-HEADER-INVALID”的报错信息,参照:Chrome插件安装时出现"CRX-HEADER-INVALID"解决方法,安装好后即可使用。

Web Components插件使用方法

实现Web组件的基本方法通常如下所示:
1.创建用于指定Web组件功能的类或函数。如果使用类,请使用ECMAScript 2015类语法(有关更多信息,请参见类)。 
使用CustomElementRegistry.define()方法注册新的自定义元素,将要定义的元素名称,指定其功能的类或函数以及从中继承的元素(可选)传递给该方法。
2.如果需要,可以使用Element.attachShadow()方法将阴影DOM附加到自定义元素。使用常规DOM方法将子元素,事件侦听器等添加到影子DOM。
3.如果需要,请使用<template>和定义HTML模板<slot>。再次使用常规DOM方法克隆模板并将其附加到您的影子DOM。
4.就像在任何常规HTML元素上一样,在页面上的任意位置使用自定义元素。
Web Components插件使用方法

Web Components Chrome插件图片

  • Web Components插件图片
  • Web Components插件图片
  • Web Components插件图片

Web Components基本信息

插件名称:Web Components 插件作者:zno.rocha 插件语言:English 官方站点:暂无官方站点 插件唯一标识:filcobblndaenakhejinpjdblekilpgn

Web Components用户数和评分

下载次数:7156 用户评分:3.71429 (共5分) 参与评分人数:14

Web Components文件信息

当前版本:0.1.1 最后更新日期:2020-07-09 文件大小:16.32KB

Web Components下载地址

Web Components相关插件

网站样式管理器-Stylish

开发者插件 2022-05-03 11:26:39

Restyle网络与时尚,一个用户样式管理器。时尚让你轻松安装主题和外观的许多著名景点。
用户风格主题的网站。用户样式赋予你的浏览体验,让你自定义的网站。拿出不相关的内容

Web Components

开发者插件 2020-03-20 00:38:22

作为开发人员,我们都知道尽可能地重用代码是一个好主意。传统上,对于自定义标记结构而言,这并不容易。考虑一下有时需要编写复杂的HTML(以及相关的样式和脚本)来呈现自定义

Web Components同类插件推荐

易蜂云采集 Chrome插件

开发者插件 2018-02-09 02:20:05

易蜂智能云采集是全新的革命性网络爬虫系统,它把整个互联网当做数据源,智能地从中提取海量的结构化数据,进而把互联网数据转变到内部数据库。易蜂云采集基于云端的SaaS和DaaS,无需部署,几分钟内定制爬虫规则,自动地分布式从云端爬取各类网站和APP,抓取海量网页,从HTML网页和APP中提取结构化数据,结果直接存入云端数据库,也可与企业现有数据仓库无缝集成,供企业进行数据分析,辅助商业决策。

恢复关闭的标签 Chrome插件

开发者插件 2019-12-21 18:15:37

产品简介:只要点击弹窗可让您轻而易举的撤销关闭的标签!
功能说明:本产品将记录用户所有网站上的数据,当不小心关闭网站时,可随时根据关闭记录打开恢复网站数据。

REST Sniffer Chrome插件

开发者插件 2016-04-29 13:27:26

A developers tool that extends the Network tab
API Sniffer is a tool that assists developers to better understand REST API. As nowdays (RESTful) APIs follow similar guidelines, it is possible to m

Tag Assistant (by Google) v18.319.0 Chrome插件

开发者插件 2020-01-21 06:54:51

Tag Assistant 帮助您验证您的页面上是否正确安装了各种 Google 标签。只要导航到任何页面,标签助手就会告诉你存在哪些标签,报告我们发现的任何错误,并建议对您的实现进行改进。包括 Google Analytics 、 Adwords 转换跟踪、 Google 标签管理器等在内的大多数 Google 标签都被检查过。
使用 Google 标签助手记录来记录进出网站的典型用

短码 Chrome插件

开发者插件 2016-07-27 18:21:34

根据当前页面生成二维码和短地址,并提供分享功能!
根据当前页面生成二维码和短地址,并提供分享功能!

爬爬 Chrome插件

开发者插件 2018-02-20 19:02:39

一个好用到爆的数据爬虫工具,支持微信公众平台、今日头条、豆瓣电影、大众点评、淘宝众筹等。

★ 在网页上显示微信文章的阅读点赞评论打赏数据
★ 微信文章分钟监测及文章回采
★ 查看收藏夹数据,分层级显示
★ 内置通用的URL打开器,可辅助自动爬数
★ 自动关闭已爬页面
★ 插件开源,无限扩展


更新记录:
<

广点通DMP布码工具 Chrome插件

开发者插件 2020-01-11 14:58:45

1. 广点通DMP布码工具可以帮您在网页中检查是否成功上报DMP行为数据。请您在自己的网页中嵌入广点通DMP JS代码,使用布码工具检查页面中的转化行为上报是否符合您的上报需求。
2. 广点通DMP布码工具可以辅助您在DMP中使用NOCO无码数据接入功能。

Web Developer Form Filler Chrome插件

开发者插件 2014-12-17 21:12:26

此扩展开发人员使用,以方便填写表格
此扩展开发人员使用,以方便填写表格,同时开发网络页面
提供
的源代码在GitHub上的https : //github.com/abzubarev/web-developer-form-filler-ext

527轻会议屏幕共享录制 Chrome插件

开发者插件 2017-03-02 12:25:39

527轻会议屏幕共享录制插件
本插件是用来让浏览器能实现屏幕共享的功能。在使用527轻会议这个软件网络视频会议系统的时候,使用屏幕共享时会检测浏览器是否安装该插件。只有安装该插件才能使用屏幕共享的功能。

哔哩哔哩直播 html5 播放器 Chrome插件

开发者插件 2018-05-28 03:50:57

本扩展基于 flv.js ,用于将 bilibili 直播的 Flash 播放器替换为 html5 播放器。

** 停止维护 **

官方 html5 :http://live.bilibili.com/help/#uh5

更新:
修复与官方 html5 冲突

推荐搭配 https://userstyles.org/

Postman Chrome插件

开发者插件 2018-04-16 16:08:38

Postman是一个非常有力的Http Client工具,Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件,可在Web服务测 试中用来进行接口测试。

为打击盗链困扰,本站已启用公众号人机验证
微信扫码关注公众号,发送"插件"二字获得验证码,验证码5分钟有效。

Chrome插件离线安装方法