28、Aurelia 中的 Web 组件与 Shadow DOM 应用

Aurelia 中的 Web 组件与 Shadow DOM 应用

1. Aurelia 中 HTML 模板的使用

Aurelia 视图是使用 HTML 模板创建的。以下是一个 info - card 视图模板在 Aurelia 中的示例，使用单向字符串绑定将卡片的消息渲染到 DOM 中：

<template> 
  <div class="info-card">
    <p>${message}</p>         
  </div>
</template>

这里的字符串绑定是 Aurelia 为模板添加的额外语法糖，便于将 JavaScript 模型中的数据渲染到视图中。

2. 自定义元素

由于性能等原因，Aurelia 团队创建了特定于框架的自定义元素实现。不过，自定义元素在 Aurelia 和原生 Web Components 中的结构很相似。

2.1 原生 Web Components 自定义元素示例

创建原生自定义元素，需定义一个继承自 HTMLTemplate 的类，该类定义自定义元素如何构建其 HTML，然后将该类与特定标签名注册到浏览器。以下是一个 x - info - card 自定义元素的实现：

customElements.define('x - info - card',