Web Components 学习笔记二：使用 Custom Elements 创建可复用的自定义组件

已于 2022-03-27 15:33:16 修改
阅读量1.4k 收藏 2
点赞数 1
分类专栏： 学习笔记 文章标签： webkit 前端
于 2022-03-26 21:36:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38291448/article/details/123764234
版权

公众号：妙蛙种子前端

原文地址：Web Components 笔记二：使用 Custom Elements 创建可复用的自定义组件 | 妙蛙种子 - 记录WEB前端技术学习成长过程的博客

上篇文章介绍了什么是Web Component，它出现的背景是什么，解决了什么问题。详细查看：

Web Components笔记一： Web Components是什么？解决了什么问题？ | 妙蛙种子 - 记录WEB前端技术学习成长过程的博客

本次我们尝试使用 Custom Elements 的来定义一个可以在页面上随意复用的自定义组件。组件为一个猫咪眼珠跟随小球运动的css动效，效果如：

DEMO在线地址： Custom Element - Web Component 

创建组件模版

我们编写组件的目的就是为了dom、样式、事件的复用，因此我们需要使用一个组件模版来承载这些复用的东西。我们可以使用 HTML 的内容模版 <tenplate&

最低0.47元/天 解锁文章
妙蛙种子前端
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用 custom element 创建自定义元素
weixin_34242331的博客
10-08 873
很早我们就可以在 HTML 文档中写 <custome-element></custom-element> 这样的自定义名称标签。但是浏览器对于不认识的标签一律当成一个普通的行内元素处理，没有相关语义。虽然我们能用 JavaScript 代码给它添加一些功能，但是并没有生命周期相关的函数供我们做一些初始化和销毁的处...
Web Components系列（三） —— 创建 Custom Elements
编程三昧
02-09 1046
自定义元素分为两类：Autonomous custom elements（自主定制元素）和Customized built-in elements（自定义内置元素），这两者在使用上到底有什么区别？
自定义元素（custom elements）
alkbjewq29891的博客
07-06 243
记录下自定义html自定义元素的相关心得： 浏览器将自定义元素保留在 DOM 之中，但不会任何语义。除此之外，自定义元素与标准元素都一致 事实上，浏览器提供了一个HTMLUnknownElement，HTMLElement对象，所有自定义元素都是该对象的实例。 var tabs=document.createElement("tabs"); console.log...
自定义元素customElements
weixin_38551805的博客
04-13 271
// 自定义元素 class FooElement extends HTMLElement { constructor() { super(); // this 引用Web 组件节点 this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = ` <p>I'm inside a custom element!</p> `; } } customEleme.
customElement 自定义组件
lhove的博客
02-21 138
具体可参考链接：https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_custom_elements
custom-elements-ts：使用Typescript创建本机自定义元素
02-06
使用Typescript创建本机自定义元素，而不使用任何第三方库。 npm install custom-elements-ts 用法 import { CustomElement } from 'custom-elements-ts' ; @ CustomElement ( { tag : 'counter-element' , ...
using-custom-elements：开始使用自定义元素
02-06
使用自定义元素 开始使用自定义元素 演示版 访问
custom-elements-manifest：Custom-elements.json是描述自定义元素的文件格式
02-06
Custom-elements.json是描述自定义元素的文件格式。 这种格式将允许工具和IDE在给定项目中提供有关自定义元素的丰富信息。 但是，这是非常实验性的，事情可能会发生变化。 在关注讨论。 此实现尚处于开发的早期阶段...
custom-elements：一个使用TypeScript装饰器构建Web组件的项目
02-06
自定义元素一个使用TypeScript装饰器构建Web组件的游乐场。问题当使用Custom Elements API开发Web组件时，在所有类声明中都会重复很多样板。解提供一种功能性方法，以将某些逻辑封装到可重用的功能中，特别是一种...
svelte-web-components-template：用于使用Svelte构建可共享的Web组件库的基本模板
02-06
使用构建可共享的Web组件库的基本模板。 如何使用此模板 您可以通过选择GitHub上的Use this template按钮直接从此模板创建新的GitHub存储库。 您还可以使用以下命令在本地克隆它： npx degit sinedied/svelte-web...
svelte-custom-element：一个项目模板，用于使用Svelte构建自定义元素（Web组件）
02-06
精巧的定制元素 一个项目模板，用于使用构建自定义元素（Web组件）。 目录 用法 请注意，您将需要安装 要使用基于此模板创建一个新项目： npx degit gojutin/svelte-custom-element my-custom-element cd my-custom-element 安装依赖项： cd my-custom-element npm install 然后使用启动开发服务器： npm run dev 然后，您可以通过访问在浏览器中查看站点。 关于此模板 Svelte编译器提供了编译为自定义元素（Web组件）的选项。 这使您可以使用Svelte的大部分功能来创
sveltecustomelements将Svelte组件转成web组件
08-10
svelte-custom-elements：将Svelte组件转成web组件
Custom Elements详解
YiYour的博客
03-05 2555
        自定义元素为作者构建自己的完整功能DOM元素提供了一种方法。虽然作者总是可以在他们的文档中使用非标准元素，但通过脚本编写或类似方法添加特定于应用程序的行为后，这些元素在历史上一直不符合要求，而且功能也不是很强大。通过定义自定义元素，作者可以通知解析器如何正确构建元素以及该类的元素如何对变化作出反应。一、创建一个自定义元素        我们想要创建一个为了说明如何创建自主自定义元素...
HTML5 ShadowDOM & CustomElements
09-25 255
Web组件由四部分组成 Template Shadow DOM (Chrome Opera支持) Custom Elements Packaging Shadow DOM 组成 Shadow DOM可以和一个根节点Shadow root关联, 该Shadow DOM元素称为Shadow Host内容不会被渲染, 而Shadow root内容会被渲染。 但是，内容...
小程序的组件
weixin_54676931的博客
04-12 222
一、小程序组件复用 组件是什么 组件：具有完整功能（html-视图,css-样式,js-逻辑），并且独立运行的模块 插件：通常是为了完成某项具体的业务功能而开发的js文件 例如：swiper.js,弹框.js，。。。。 类库：library,是提供了为了完成项目的工具方法的集合，跟具体的业务无关！ 例如：jQuery,lodash.js 框架:framework,分 是为了快速完成项目搭建的基础。框架分：UI 框架和javaScript框架 UI框架：boostStrap,Element UI,v
Web Components详解-Custom Elements
08-28 1199
随着项目体量的增大，组件化和模块化的优势也愈发明显了，构建可重复使用、独立、可互操作的组件变得尤为重要，在JS中我们可以通过class和函数对代码解耦，使某段代码可以复用。在TS中我们也可以通过模块对代码进行模块化开发，在HTML页面中同样有一种技术可以实现独立的、可复用的组件，这便是本篇文章讲到的Web ComponentsWeb Components主要包括Custom Elements、Shadow DOM、HTML Templates和JavaScript这四部分，在后续的文章中我们会详细讲讲在熟悉
Element框架自定义公共组件
欢迎来到快乐星球
11-18 1262
在使用Element框架时，多半是从github或git中获取的大佬写好的开源框架，或者Element官网的框架。 但作为开发者，会知道：客户的需求总在奇奇怪怪的地方。 总会有不符合客户需求的样式或者功能，但由于各种组件及样式存在于node_modules这个文件夹中，所以我们通常无法快捷地去修改。 跟据各方面求证发现：需要上传当前node_modules库到自己的库中，修改完导自己的库，个人觉得比较麻烦。（当然如果大批量修改的时候可以这样，就相对没有那么麻烦了，可这样不就相当于自己造轮子了？????） 接
自定义html标签 继承,HTML DOM customElements define()用法及代码示例
weixin_29964487的博客
06-10 1472
的customElementsdefine()方法用于定义新的自定义元素。可以创建两种类型的定制元素：自治的自定义元素：这些元素不继承自内置 HTML元素。自定义的内置元素：这些元素继承自内置 HTML元素。用法:customElements.define( name, constructor, options );参数：name:它指定新的自定义元素的名称。自定义元素的名称必须包含连字符。con...
自定义HTML元素的快速指南
最新发布
u011082575的博客
09-25 136
这些元素应用于自己的功能，并且与其他内置HTML元素除了HTMLElement接口中定义的属性外没有共同的属性（HTMLElement接口是每个HTML元素的基本属性或最低要求的属性）。在调用super之后，我调用了我们新元素的attachShadow方法（从HTMLElement继承而来），该方法返回新创建的#shadow-root，我将其存储在名为shadow的变量中。它的目的是初始化我们的组件，并将任何功能附加到它，每当一个新的web组件实例被创建时，都会调用这个构造函数。
uni-app使用自定义组件
05-24
Uni-app 支持使用自定义组件，使用步骤如下： 1. 首先在项目的 components 目录下创建一个自定义组件的目录，例如 my-component。 2. 在 my-component 目录下创建一个 my-component.vue 文件，这个文件就是自定义...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值