随着国际化市场的发展，许多网站都需要支持多语言显示，方便不同语言阅读和使用，这就需要在前端开发中加入对国际化的支持。本文将介绍如何使用 Custom Elements 实现国际化。
Custom Elements
Custom Elements 是一种 Web 标准，可以自定义 HTML 标签，包括元素特性、样式、行为等。Custom Elements 可以让开发者创建自己的 Web 组件，使得 Web 应用之间的代码重用性变得更高，并且可以轻松管理自定义元素。
Custom Elements 有 4 个主要的 API：customElements.define()、customElements.get()、customElements.whenDefined()、customElements.upgrade()，其中最核心的是 customElements.define()。
如何实现国际化
通过自定义元素实现国际化的方法为，创建一个名为 i18n 的自定义元素，在其中定义多个不同语言的文本内容，再通过 JavaScript 来选择不同的语言并切换不同的文本内容。
首先，创建一个 HTML 元素和对应的 JavaScript 代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------
-------
------
------
----- --------------------
----- -----------------------
----- -----------------------
-------
------- --------------
----- ---- ------- ----------- -
------------- -
--------
-
-
----------------------------- ------
---------
-------
-------HTML 中的 i18n 自定义元素命名规则是 i 开头（指 internationalization），后面跟着一串数字表示国际化的版本号。在 i18n 元素的内部，通过添加多个 span 元素，每个 span 元素对应着一个不同语言的文本。使用 slot 属性为每个 span 元素指定特定的名字。
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
const i18nContent = this.querySelector(`[slot=${localStorage.getItem('locale')}]`);
const text = i18nContent.textContent;
shadowRoot.innerHTML = text;
}在 JavaScript 中，通过继承 HTMLElement 来创建 I18n 类，然后创建 i18n 元素。通过使用 attachShadow() 方法创建一个线程安全的 Shadow DOM，然后使用 querySelector() 和 localStorage() 方法获取当前的语言设置。使用 Shadow DOM 的 innerHTML 属性来设置元素文本内容，这样就可以轻松地为每个不同的语言切换不同的文本内容。
const language = 'en';
localStorage.setItem('locale', language);最后，使用 localStorage 方法来存储当前用户的语言设置。在这个示例中，我们默认将语言设置为英语（en）。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------
-------
------
-----
------- ---------------------------------------
------- ---------------------------------------
------- ---------------------------------------
------
------
----- --------------------
----- -----------------------
----- -----------------------
-------
------- --------------
----- ---- ------- ----------- -
------------- -
--------
----- ---------- - ------------------------ ---------
----- ----------- - ---------------------------------------------------------------
----- ---- - ------------------------
-------------------- - -----
-
-
----------------------------- ------
-------- --------------------- -
------------------------------ ----------
------------------
-
---------
-------
-------结论
通过本文的介绍，我们已经了解了如何使用 Custom Elements 实现国际化。使用 Custom Elements 来创建自定义 Web 组件，具有更好的代码可重用性，并且让代码更加易于维护。尝试自己创建一个 i18n 元素，并进行实验，感受一下使用 Custom Elements 带来的乐趣。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674feebdfbd23cf89070fd28