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

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本地化。

尽管当标准元素的标准属性被放置在自定义元素的<content>标记中时，l20n可以处理标准元素的标准属性，但在自定义元素中使用“标题”等标准HTML属性时，这个问题也很明显。

围绕其属性处理的l20n文档似乎不是很广泛。到目前为止，在Stack Overflow和Google上搜索答案被证明是徒劳的，Mozilla托管了他们自己的讨论列表和bug跟踪器，一般公众似乎不太容易访问。

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 repo中当前发布的l20n版本，即dist/compat文件夹中的版本。