Web Component自定义元素

「已注销」

已于 2022-05-09 18:48:58 修改

阅读量465

点赞数

分类专栏： ECMAScript 文章标签：前端

于 2022-05-09 18:45:00 首次发布

本文链接：https://blog.csdn.net/weixin_45895753/article/details/124672348

版权

本文介绍了Web Component自定义元素的基本概念，包括其名称规范和使用方式。通过一个简单的项目结构展示，详细讲解了从创建项目到实现自定义元素的步骤，并提供了具体的HTML和JS代码示例。在运行效果部分，读者可以直观地了解自定义元素的最终展示。最后，引用了阮一峰的Web Components入门实例教程作为进一步学习的参考。

摘要由CSDN通过智能技术生成

一概述

自定义元素的名称必须包含中划线；必须有起始标签、结束标签，不能写成闭合标签。

二项目结构

在HBuilder中创建普通项目。

三代码

1 index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Web Component自定义元素</title>
	</head>
	<body>
        <!-- Jimmy的名片 -->
		<user-card id="first" image="./img/kristy.png" name="Jimmy" email="Jimmy@163.com"></user-card>
        <!-- Aaja的名片 -->
		<user-card id="first" image="./img/kristy.png" name="Aaja" email="Aaja@163.com"></user-card>
		<script src="./js/user-card.