【Udemy中英字幕】Web Components & Stencil.js – Build Custom HTML Elements

Web 组件和 Stencil.js – 构建自定义 HTML 元素

使用和不使用 StencilJS 构建自定义 HTML 元素/Web 组件的完整介绍

讲师：Academind by Maximilian Schwarzmüller

双语IT资源独家Udemy付费课程，独家中英文字幕，配套资料齐全！

用不到1/10的价格，即可享受同样的高品质课程，且可以完全拥有，随时随地都可以任意观看和分享。

您将学到什么

• 构建您自己的可重复使用的 HTML 元素，您可以在自己的项目中使用或与其他开发人员共享
• 仅利用 HTML、CSS 和 JavaScript 的强大功能克服内置 HTML 元素的限制

探索相关主题

要求

• 需要基本的 JavaScript 知识（基本语法、DOM 基础、对象基础）
• ES6+ JavaScript 知识（类等）是加分项，但不是必需的

描述

让我们面对现实：您有数百个 HTML 标签可供选择，但缺少一些真正有用的标签（、、 等）。

如果您可以构建自己的 HTML 标签会怎样？ 

无需 Angular 之类的框架、React 之类的库，也无需专业的 JavaScript 知识。只需一个神奇的原生 JavaScript 功能，即“Web 组件”（或称“自定义 HTML 元素”）。

Web 组件是嵌入到浏览器中的多种规范的组合。这些功能入门非常简单，您可以快速构建强大且可复用（甚至跨项目！）的自定义 HTML 元素。

但是，这些自定义元素并不能取代 Angular、React 或 Vue – 相反，您可以在任何 Web 项目中轻松使用它们，包括使用此类框架和库的项目。

在本课程中，您将从头开始学习这一点。

但我们不会就此止步。虽然入门相当容易，但创建更复杂的组件会更加困难。Stencil.js 是一款工具，它利用 TypeScript 和 JSX 等现代特性，让创建此类原生 Web 组件变得更加容易（不知道这些特性？别担心，你会在课程中学习！）。

具体来说，在本课程中您将学习：

• 如何利用原生浏览器功能构建可重复使用的轻量级自定义 HTML 元素

• 如何构建各种复杂的 Web 组件 – 从简单的工具提示到模态框或侧边抽屉

• 如何将数据传递到您自己的 Web 组件并在那里使用它

• 如何发出可以在 JavaScript 中监听的自定义事件

• 如何使用 Shadow DOM 将 CSS 样式限定到自定义元素

• 如何使用 Stencil.js 获得更简单的开发工作流程

• 如何使用 Stencil.js 提供的众多功能更高效地构建原生 Web 组件

• 如何在任何项目中使用任何 JavaScript 框架（如 Angular、React 或 Vue，或者根本不使用！）部署/重新使用您自己的 Web 组件

先决条件：

• 必须具备基本的 JavaScript 知识

• 强烈建议但不严格要求掌握 ES6 JavaScript 知识（const、let、classes 等）——课程中会提供简短的复习

• 无需 JavaScript 框架知识（例如 Angular、React、Vue）

• 无需 TypeScript 或 JSX 知识

让我们一起深入研究这项令人兴奋的技术！

本课程适合哪些人：

• 所有对构建自定义 HTML 标签感兴趣的人！
• 想要深入研究可用于任何 Web 应用程序的面向未来的 Web 技术的学生