介绍

Dojo 小部件可以编译成自定义元素，因此可以像任何其他类型的 HTML 标签一样使用。小部件的属性将自动转换为 HTML 属性、属性或事件。

每个小部件都打包到一个 JavaScript 文件和一个 CSS 文件中，这两个文件都导入到您的 HTML 中。

index.html

<html>
  <head>
    <link rel="stylesheet" href="ref-hero.css">
  </head>
  <body>
    <script async src="ref-hero.js"></script>
  </body>
</html>

功能	描述
小部件属性	根据属性的类型和名称，Dojo 将决定属性应该是自定义元素上的属性、属性还是事件。
子渲染器	使用子对象或渲染器的小部件通过使用插槽在自定义元素中得到支持。
延迟加载	自定义元素脚本不需要在页面上引用自定义元素之前加载。元素将在脚本加载时自动水化。

构建自定义元素

Dojo 小部件可以使用 @dojo/cli-build-widget 命令构建为自定义元素。

src/widgets/Hero.tsx

import { create, tsx } from '@dojo/framework/core/vdom';
import * as css from './styles/Hero.m.css';

export interface HeroProperties {
	title: string;
	image: string;
}

const factory = create().properties<HeroProperties>();
export default factory(function Hero({ properties }) {
	const { title, image } = properties();

	return (
		<div classes={css.hero}>
			<img classes={css.image} src={image} />
			<h1 classes={css.title}>{title}</h1>
		</div>
	);
});

要将小部件构建为自定义元素，请在您的 .dojorc 文件中添加一个 build-widget 属性，并包含您要公开为自定义元素的任何小部件的路径。

.dojorc

{
	"build-widget": {
		"prefix": "ref",
		"widgets": ["src/widgets/Hero"]
	}
}

自定义元素需要包含连字符。在构建过程中，Dojo 将获取小部件名称 MyWidget 并在大写字母边界添加连字符 my-widget。由于这有时还不够，因此会为每个小部件添加一个前缀，以确保元素包含连字符。默认情况下，package.json 中的 name 字段用作前缀，但这可以使用 .dojorc 中的 prefix 选项覆盖。由于前缀是 ref，因此 MyWidget 小部件将构建成名为 ref-my-widget 的自定义元素。

配置好后，使用 Dojo CLI 构建小部件。

$ dojo build widget

output/dist/ 目录现在包含已构建的自定义元素。

ref-hero.js - 水化自定义元素所需的所有代码。在您的 HTML 文件中加载此脚本将使您的 Dojo 小部件作为自定义元素运行。
ref-hero.js.map - 用于简化调试的 JavaScript 源映射文件。这些文件仅在调试期间使用，不需要上传到生产环境。
ref-hero.css - 小部件使用的 CSS。请注意，这仅包含该小部件的样式。

使用自定义元素

使用 Dojo 构建的自定义元素就像在您的 HTML 中包含生成的文件一样简单。要使用英雄小部件，请导入这些文件。

<!DOCTYPE html>
<html lang="en-us" dir="ltr">
<head>
	<meta charset="utf-8">
    <title>Using Custom Elements</title>
    <link rel="stylesheet" href="./output/dist/hero-1.0.0.css">
</head>
<body>
    <ref-hero image="hero.jpg" title="Make Custom Elements the Easy Way!"></ref-hero>
    <script async src="./output/dist/hero-1.0.0.js"></script>
</body>
</html>

如果您有多个自定义元素，请为每个使用的元素包含 link 和 script 标签。

在某些浏览器中，您可能需要包含自定义元素 polyfill。我们建议包含 @webcomponents/custom-elements