如何获取 HTML5 输入来验证它们是否位于 Polymer Web 组件内？

我正在使用 Polymer Web Components，我的应用程序以 Chrome 为目标。在我的表单上，在 Web 组件之外，我有一个输入类型=“数字”，当我在输入中输入“a”并提交表单时，我会收到一个工具提示，显示“请输入数字”。

但是，我有另一个输入 type="number" 位于 Web 组件的 Shadow DOM 中。当我在该字段中输入“a”并提交表单时，我没有得到任何工具提示。有没有办法让行为更加一致？

我没有看到您描述的相同问题（使用 Chrome 36 和 Polymer 0.3.3）。使用以下简单的 Polymer 元素，表单验证按预期工作（jsbin http://jsbin.com/modede/2/edit):

<polymer-element name="test-element" noscript>
  <template>
    <form>
      <label>Inside the element:</label>
      <input type="number" placeholder="Numbers only!">
      <input type="submit">
    </form>
  </template>
</polymer-element>

EDIT：在您显示的示例中，您的主页的<form>与聚合物元件分离<input>因为影子 DOM http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/边界。您以这种方式构建事物有什么原因吗？

它看起来不像任何<input>存在于 Shadow DOM 中的实际上是与 light DOM 一起提交的<form>，因此它们没有经过验证的事实在某种意义上是预期的，也是您最不需要担心的。 （查看网络跟踪这个例子 http://jsbin.com/sotaqire/6/edit你只会看到test=1234已提交。）

采用上面示例中的方法并包括<form>Polymer 元素中的 足以获得现代浏览器提供的预期验证行为。或者，如果您真正想要的是<template>并且您不需要完整的聚合物元素，您可以按照以下方式做一些事情（jsbin http://jsbin.com/sotaqire/3/edit):

<form>
  <template is="auto-binding">
    <label>Inside the element:</label>
    <input type="number" placeholder="Numbers only!" value="{{myNumber}}">
  </template>
  <input type="submit">
</form>
<script>
  document.querySelector('template').myNumber = 34;
</script>

这也有效，因为一旦<template>绑定后，内容会像任何其他元素一样直接添加到页面的 DOM 中。

如果您强烈认为无法按照描述重构代码，那么我认为您需要通过针对相关网络浏览器的错误来解决您的担忧，并看看他们是否愿意开始考虑<input>Shadow DOM 中的元素作为 light DOM 的一部分<form>.