阮一峰 自定义元素教程中的一些疏漏

最新推荐文章于 2024-04-17 16:48:37 发布
最新推荐文章于 2024-04-17 16:48:37 发布
阅读量557 收藏 3
点赞数 1
分类专栏： javascript html 文章标签： html 阮一峰 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunq1982/article/details/79004377
版权
根据阮一峰的自定义元素教程尝试实现时遇到问题，通过查阅资料找到解决方案。文章对比并分享了修正后的代码，确保自定义元素能够正确运行。
摘要由CSDN通过智能技术生成

最近突发奇想，想自己写一些html元素方便以后重复调用，所以参照了阮大神的下面这篇文章，跟着敲了下代码，发现无法运行。

http://www.ruanyifeng.com/blog/2017/06/custom-elements.html

后来又是搜索了很多资料，发现下面这篇文章是讲得最清楚的，而且其代码可以运行成功

https://segmentfault.com/a/1190000011465768

于是重新改写了了下阮大神文章里面的自定义元素的代码：

下面是html。你可以先定义元素，然后在后面的script中实现：

<!DOCTYPE html>
<html lang="en">

<head
最低0.47元/天 解锁文章
sunq1982
关注
专栏目录
「前端基础」阮一峰JavaScript教程笔记（一）
雨y飘零久的博客
09-21 3354
文章目录数据类型概述1.简介2.typeof 运算符null, undefined 和布尔值1. null 和 undefined2. 布尔值 数据类型 概述 1.简介 原始(基础)类型（primitive type）: 数值（number） 字符串（string） 布尔值（boolean） symbol null undefined bigInt 2020.6 新出了一个新的数据类型bigInt 8种数据类型， 7种原始类型和object 对象是最复杂的数据类型，又可以分成三个子类型。 狭义的对象（
【JS】阮一峰js教程总结
zhaohb2016的博客
07-13 4495
区别是这样的：null 是一个表示“空”的对象，转为数值时 为 0 ；-undefined 是一个表示”此处无定义”的原始值，转为数值时为 NaN 。注意，空数组（ [] ）和空对象（ {} ）对应的布尔值，都是 true 。 NaN “非数字”（ NaN ）,typeof NaN // ‘number’ NaN 不等于任何值，包括它本身。 NaN 在布尔运算时被当作 false 。 NaN 与任何数（包括它自己）的运算，得到的都是 NaN 。 isNaN()方法可以用来判断一个值是否为 NaN 。isN
阮一峰 Webpack 教程
热门推荐
userkang的博客
10-29 3万+
写在开头： 此 Webpack 教程是阮老师在 Webpack 1.x 的版本上做的。现在 Webpack 的版本已经改动较大，建议有基础的同学，就直接上官网看最新的就好了。这个教程可以用来了解下 Webpack 的前世今生。 开始 这个项目是一些简单的 Webpack 示例集合 这些示例特意用简单明了的方式编写，你将会发现跟着这些例子学习这个强大的工具并非难事。 如何使用 首先，全局安装 Web...
阮一峰 ES6 入门教程
u014212540的博客
03-09 1406
阮一峰 ES6 入门教程
阮一峰JavaScript教程.pdf
09-14
阮一峰JavaScript教程.pdf 阮一峰JavaScript教程是一本系统的JavaScript教程，涵盖了JavaScript语言的核心语法、数据类型、函数、数组、对象、异步操作、DOM操作等方面的知识点。下面是该教程的详细知识点总结： ...
阮一峰 JavaScript 教程.pdf
04-10
以上内容详细介绍了阮一峰所编写的 JavaScript 教程中涵盖的知识点，从基础语法到高级特性，覆盖了编程、开发中需要掌握的大部分概念和用法。这本教程特别适合初学者作为入门书籍，内容详尽，理论与实践相结合，配合...
阮一峰es6教程文档源码
03-16
通过阮一峰的ES6教程源码，读者可以深入了解这些特性在实际代码中的应用，以及如何结合其他JavaScript知识进行有效的编程实践。同时，源码还可能包含对ES6新特性更深入的解释、示例和练习，对于提升JavaScript技能...
python阮一峰-阮一峰：Fishshell入门教程.pdf
06-13
《Python阮一峰：Fishshell入门教程》 Python开发者在日常工作中经常需要与命令行交互，而Shell作为命令行的接口，其重要性不言而喻。常见的Shell有Bash和zsh，但本文作者阮一峰推崇的是Fish Shell，认为它在易用性...
javascript标准参考教程_阮一峰
10-17
csdn上有一份阮一峰JavaScript教程的pdf但是其中几页有问题，我稍微修改了一下，因为是免费pdf编辑器，第一页有一个编辑器的广告封面，请见谅
flex盒子模型教程 作者：阮一峰，腾讯后台开发，前端开发学习教程
m0_61408947的博客
03-18 972
（3）：换行，第一行在下方。
Flex布局
akufr2065的博客
03-07 90
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用flex布局 .box{ display: inline-flex; } Webkit内核的浏览器，必须加上-webkit前缀。 .box...
flex盒子模型教程 作者：阮一峰，为什么大公司一定要使用微服务
03-18 900
（3）：换行，第一行在下方。
Nginx 从入门到实践，万字详解
m0_67322837的博客
05-26 2727
最近越来越频繁地遇到需要配置反向代理的场景，在自己搭建博客的时候，也不可避免要用到 Nginx，所以这段时间集中学习了一下 Nginx，同时做了一些笔记，希望也可以帮助到大家～ 😜 这篇文章会在 CentOS 环境下安装和使用 Nginx，如果对 CentOS 基本操作还不太清楚的，可以先看看 <半小时搞会 CentOS 入门必备基础知识> 一文先做了解。 相信作为开发者，大家都知道 Nginx 的重要，废话不多说，一起来学习吧。 CentOS 版本：7.6 Nginx 版本：1.16.
nginx教程阮一峰，jmeter性能测试步骤
最新发布
2301_82257730的博客
04-17 730
对于面试还是要好好准备的，尤其是有些问题还是很容易挖坑的，例如你为什么离开现在的公司（你当然不应该抱怨现在的公司有哪些不好的地方，更多的应该表明自己想要寻找更好的发展机会，自己的一些现实因素，比如对于我而言是现在应聘的公司离自己的家更近，又或者是自己工作到达了迷茫期，想跳出迷茫期等等）Java面试精选题、架构实战文档你的支持，我的动力；祝各位前程似锦，offer不断！《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！" />
【TypeScript】阮一峰TypeScript教程笔记：基本用法、any 类型等、类型系统
karshey的博客
10-09 3166
TypeScript 可以看成是 JavaScript 的超集（superset），即它继承了后者的全部语法，所有 JavaScript 脚本都可以当作 TypeScript 脚本（但是可能会报错），此外它再增加了一些自己的语法。TypeScript 对 JavaScript 添加的最主要部分，就是一个独立的类型系统。类型系统类型是人为添加的一种编程约束和用法提示。目的：提早发现错误。，在TypeScript中会报错，但在JS中不会。动态类型与静态类型JS是动态类型语言，TS是静态类型语言。
nginx安装时执行make编译报错: No rule to make target `build', needed by `default'. Stop.
干饭两斤半
08-10 1万+
问题描述: 使用yum下载安装好对应的c++运行环境之后.解压nginx压缩包,执行命令 ./configure \ --prefix=/usr/local/nginx \ --pid-path=/var/run/nginx/nginx.pid \ --lock-path=/var/lock/nginx.lock \ --error-log-path=/var/log/nginx/error.lo...
Web Components学习(3)-深入理解自定义元素
woyebuzhidao321的博客
03-10 962
之前说到定义自定义元素行为的类一定要继承自 HTMLElement，只有继承了它才能使用元素上的属性，如。
typescript教程阮一峰中文
06-23
### 回答1： Typescript教程阮一峰中文，是一份非常详细且实用的文档。可以帮助初学者更快地上手Typescript，也可以帮助有经验的开发者更深入地理解Typescript的使用与应用。 阮一峰的教程从介绍Typescript的语法和类型系统开始，然后逐渐深入到如何在Node.js和浏览器环境中运行Typescript，以及如何与React和Vue.js等流行框架集成。教程还包括了许多实例和代码示例，具有很高的实用价值。 与其他教程不同的是，阮一峰的教程不仅注重了Typescript的语法和用法，还探讨了Typescript的设计哲学和背景。这让读者更加深入地了解Typescript的本质，从而更好地判断和运用Typescript的优势和局限性。 总之，Typescript教程阮一峰中文是一份不可多得的优秀学习资源。它既适合初学者入门，也适合有经验的开发者深入学习。我强烈推荐这份教程给所有对Typescript感兴趣的人阅读学习。 ### 回答2： typescript是一种由微软开发的、基于JavaScript的静态类型语言。相比JavaScript，typescript主要有以下特点： 1. 类型检查：typescript允许程序员在编写代码时定义变量的类型，从而可以在编译阶段进行严格的类型检查，减少在运行时出现的异常情况。 2. 代码提示：typescript支持编辑器进行代码提示，以帮助程序员更快速地编写代码。 3. 面向对象：typescript支持类、接口、继承等面向对象的开发方式，代码更具可读性和可维护性。 阮一峰的typescript教程是一份详细的学习资料，包括typescript的基本语法、类型、函数、类、接口等方面的内容，并且提供了很多示例和练习，帮助读者更快地掌握typescript的编程技巧。同时，这份教程也包括了一些高级的主题，如装饰器、泛型等，对于想要深入学习typescript的程序员来说是一份很好的学习材料。 总之，阮一峰的typescript教程是一份非常好的学习材料，适合初学者和有一定基础的程序员学习typescript。通过学习这份教程，读者可以帮助自己提高代码的质量和可维护性，也可以更好地应对各种复杂的项目需求。 ### 回答3： TypeScript是一种由微软开发的静态类型的JavaScript超集，将JavaScript增强了许多现代化的语言特性，如类型声明、接口、泛型、类等，旨在减少代码错误和提高代码的可维护性和可读性。 阮一峰的中文TypeScript教程是一份非常优秀的学习资料，该教程内容覆盖非常全面，从基础语法到高级应用都有详细的讲解。教程中的例子非常实用，能够清晰展示TypeScript如何在实际开发中使用。 该教程的适用群体非常广泛，无论是初学者还是有一定经验的开发人员都能够从中受益。初学者可以通过这份教程逐步掌握TypeScript的基础知识，而有经验的开发人员则可以深入研究TypeScript的高级应用，为自己的开发工作带来更大的便利。 总的来说，阮一峰的中文TypeScript教程是一份非常优秀的学习资料，涵盖全面、讲解详细、实用性强，建议有意学习TypeScript的开发人员可以参考此教程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值