在具有自定义属性的浏览器中使用 l20n答案

【问题标题】：Using l20n in the browser with custom attributes在具有自定义属性的浏览器中使用 l20n
【发布时间】：2015-09-02 13:11:37
【问题描述】：

我遇到了一个问题，即 l20n 仅适用于标准 HTML 元素的默认属性。

就我而言，我正在尝试使用 JSON 格式的翻译。我的虚拟数据如下：

{
  "test": {
    "attrs": {
      "title": "my_title_value",
      "custom": "my_custom_value",
      "placeholder": "my_placeholder_value"
    }
  }
}

我的测试HMTL如下：

<input type="text" data-l10n-id="test" title="" custom="" placeholder="" />

但是，浏览器会生成以下 HTML：

<input type="text" data-l10n-id="test" title="my_title_value" custom="" placeholder="my_placeholder_value">

我尝试了属性排序和属性名称的各种组合，似乎只有每个元素类型的适当默认 HTML 属性才被 l20n 本地化。

当在自定义元素中使用标准 HTML 属性（例如“title”）时，该问题也很明显，尽管 l20n 可以处理标准元素的标准属性（当它们被放置在自定义元素的 <content> 标记中时）。

关于其属性处理的 l20n 文档似乎并不十分广泛。到目前为止，在 Stack Overflow 和 Google 上搜索答案已被证明是徒劳的，而 Mozilla 拥有自己的讨论列表和错误跟踪器，这些似乎对公众来说不太容易访问。

l20n 项目似乎处于不断变化的状态，在我使用的版本 (3.0.5) 中，据称与 ES5 兼容的 webcompat/l20n.js 需要 Polyfill，因为它使用了 Array.from( );此外，示例和学习资源似乎与框架的使用方式不完全匹配。源代码完全没有文档记录，但尽管如此，到目前为止我对框架的大部分理解都是通过查看那里获得的。我在他们的代码中看不到任何属性名称过滤，所以我觉得这个问题可能是由于需要在 l20n 传递数据属性之前向浏览器注册元素（及其属性）。

提前感谢任何可以提供帮助的人。

【问题讨论】：

标签： html localization attributes custom-element l20n

【解决方案1】：

在我们的 l20n.js 文件中，有这部分控制可以翻译的属性：

var allowed = { elements: ['a', 'em', 'strong', 'small', 's', 'cite', 'q', 'dfn', 'abbr', 'data', 'time', 'code', 'var', 'samp', 'kbd', 'sub', 'sup', 'i', 'b', 'u', 'mark', 'ruby', 'rt', 'rp', 'bdi', 'bdo', 'span', 'br', 'wbr'], attributes: { global: ['title', 'aria-label', 'aria-valuetext', 'aria-moz-hint'], a: ['download'], area: ['download', 'alt'], // value is special-cased in isAttrAllowed input: ['alt', 'placeholder'], menuitem: ['label'], menu: ['label'], optgroup: ['label'], option: ['label'], track: ['label'], img: ['alt'], textarea: ['placeholder'], th: ['abbr'] } };

请注意，sn-p 来自标准 NPM 存储库中当前发布的 l20n 版本，该版本位于 dist/compat 文件夹中。

【讨论】：