又到了那一年中的时间 - 我们 穿上服装 并向所有人分发礼物。这是 Firefox 版本周！加入我，一起看看这个版本中发布的最新好东西。

Web Components，我的天哪！

经过 相当 漫长 孕育期，我很高兴地宣布，对现代 Web Components API 的支持已在 Firefox 中发布！期待更全面的写作，但让我们先了解一下这些新 API 带来的可能性。

自定义元素

简而言之，自定义元素 使得在网页平台中包含的标准集中之外定义新的 HTML 标签成为可能。它通过让 JS 类扩展内置的 HTMLElement 对象，添加注册新元素的 API 以及添加特殊的“生命周期”方法来检测何时追加、移除自定义元素或属性更新来实现这一点。

class FancyList extends HTMLElement {
  constructor () {
    super();
    this.style.fontFamily = 'cursive'; // very fancy
  }
  connectedCallback() {
    console.log('Make Way!');
  }
  disconnectedCallback() {
    console.log('I Bid You Adieu.');
  }
}

customElements.define('fancy-list', FancyList);

Shadow DOM

网页长期以来一直拥有可重用的小部件，人们可以在构建网站时使用这些小部件。在页面上使用第三方小部件时，最常见的挑战之一是确保页面的样式不会弄乱小部件的外观，反之亦然。这可能会让人沮丧（轻描淡写地说），并且会导致大量冗长且过于具体的 CSS 选择器，或者使用复杂第三方工具来重写页面上的所有样式，以避免冲突。

沮丧的开发者

必须有更好的方法……

现在，有了！

Shadow DOM 不是一个由网页开发者组成的秘密地下社团，而是一种基础的网页技术，它允许开发者创建封装的 HTML 树，这些树不受外部样式的影响，可以拥有自己的样式，不会泄漏出去，事实上，这些树可以通过正常的 DOM 遍历方法（querySelector、.childNodes 等）无法访问。

let shadow = div.attachShadow({ mode: 'open' });
let inner = document.createElement('b');
inner.appendChild(document.createTextNode('I was born in the shadows'));
shadow.appendChild(inner);
div.querySelector('b'); // empty

自定义元素和 Shadow DOM 根节点可以相互独立地使用，但当它们一起使用时，它们真正闪耀光芒。例如，假设你有一个带有播放控件的 <media-player> 元素。你可以将控件放在 Shadow DOM 根节点中，并保持页面的 DOM 清洁！事实上，Firefox 和 Chrome 现在都使用 Shadow DOM 来实现 <video> 元素。

期待很快在 Hacks 上深入探讨构建完整组件！同时，你可以深入研究 MDN 上的 Web Components 文档，并查看 GitHub 上的许多自定义元素示例代码。

字体编辑器

检查器中的字体面板是查看页面上正在使用哪些本地字体和网页字体的便捷方法。它已经非常有用，可以用于调试网页字体，在 Firefox 63 中，字体面板获得了新的功能！你可以调整当前选定元素的字体参数，如果当前字体支持字体变体，你也可以查看和微调这些参数。调整可变字体的语法可能有点陌生，并且无法以其他方式发现内置在字体中的所有变体，因此此工具可以成为救星。

阅读有关如何在 MDN Web Docs 上使用新的字体面板 的所有内容。

减少运动的首选项，用于 CSS

流畅的动画可以为数字体验提供精致和独特的体验。但是，对于某些人来说，视差和滑动/缩放过渡等动画效果会导致眩晕和头痛。此外，一些旧的/功能较弱的设备可能难以平滑地渲染动画。为了应对这种情况，一些设备和操作系统提供了“减少运动”选项。在 Firefox 63 中，你现在可以使用 CSS 媒体查询 检测此首选项，并调整/减少你对过渡和动画的使用，以确保更多人可以使用你的网站获得愉快的体验。CSS Tricks 有一篇关于如何检测减少运动以及为什么要关心的 很棒的概述。

结论

与往常一样，这个版本的 Firefox 中还有更多内容。 MDN Web Docs 包含面向开发者的更改的完整信息，更多亮点可以在 官方发行说明 中找到。祝您浏览愉快！

1. 不是特别令人惊叹