Question

我遇到的问题是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”）时，问题也很明显，尽管当标准元素置于自定义元素的<content>标记内时，l20n可以处理标准元素的标准属性

关于其属性处理的l20n文档似乎并不是非常广泛。到目前为止，在Stack Overflow和Google上搜索答案已经证明是徒劳无功的，Mozilla主持了他们自己的讨论列表和错误跟踪器，这对公众来说似乎并不容易。

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

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

Answer 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'] } };

请注意，该代码段来自当前在标准NPM仓库中发布的l20n版本，该版本位于dist/compat文件夹中。

在浏览器中使用自定义属性的l20n

1 个答案: