如何在 dart 中查询 Paper Input 元素的 Input 字段答案

【问题标题】：How to query the Input field of a Paper Input element in dart如何在 dart 中查询 Paper Input 元素的 Input 字段
【发布时间】：2014-09-13 14:16:09
【问题描述】：

所以，我正在尝试访问隐藏在纸质输入字段深处的输入字段。这样我就可以更改输入类型等。检查元素后，您可以看到它有 2 个阴影根as explained in this blog。但是，该博客中解释的方法不再有效。我正在使用飞镖版本 1.5.3，聚合物 0.12.0-dev。

我尝试像这样查询纸张输入：

querySelector('#paper-input-id').shadowRoot.querySelector('#input');

但是，这将返回 null。这是因为 shadowRoot 属性只返回第一个影子根。输入字段隐藏在第二个影子根中。我想我要问的是是否有一种通用的方法来选择元素的第 n 个阴影根？

【问题讨论】：

标签： html dart dart-polymer shadow-dom

【解决方案1】：

这似乎正是我在 <core-input> 的单元测试中所做的那样

var input = dom.document.querySelector("#changeAndInputEvent") as CoreInput;
var domInput = (input.shadowRoot.olderShadowRoot.querySelector('#input') as dom.InputElement);

也应该起作用的是

var domInput = (dom.document.querySelector("#changeAndInputEvent /deep/ #input");

或

var domInput = (dom.document.querySelector("* /deep/ #changeAndInputEvent /deep/ #input");

当纸张输入本身位于 shadow-dom 内时

【讨论】：

这适用于纯核心输入。核心输入只有 1 个影子根。 Paper input 是 Core input 的子类，并添加了它自己的 shadow root 和附加功能。 Paper 输入的影子根插入在核心输入的影子根之前。因此，输入元素隐藏在第二个影子根中。当您在纸张输入上调用 shadowRoot 属性时，您只能访问它自己的影子根，而不是它的父影子根。那是我的问题。我要查询shadowroot的父类。
抱歉，我似乎没有正确阅读您的问题。我更新了我的答案。
我添加了最近发现的另一个选项。

【解决方案2】：

不要使用shadowRoot 和olderShadowRoot，如果由于某种原因paper-input 决定继承一些新的东西，然后从core-input 继承，那么这可能会改变，而是尝试使用更通用的shadowRoots 映射（注意' s'):

querySelector('#paper-input-id').shadowRoots['core-input'].querySelector('#input');

【讨论】：

我在 Polymer.dart 中没有找到该属性。你在 Dart 中使用过还是只在 JS 中使用过？
现在我看得更深了，我什至无法让它在 JS 中工作。它似乎只适用于 Chrome 开发工具控制台。而且它不在规范中。
啊哈！我发现 shadowRoots 属性在哪里 created in Polymer!
这在本机 Web 组件中是不必要的，这是有道理的，因为您正在执行自己的模板克隆和 Shadow DOM-ing，因此您可以在 createdCallback 中保存对任何所需内容的引用!
我不知道这是否在 Polymer.dart 中，但确实应该如此。接受的解决方案从外部工作正常，因为您知道您正在使用纸张输入。但是，如果该代码在扩展元素中，那么有人扩展了那个元素，现在有 3 个影子根，olderShadowRoot 技巧将不再让您到达所需的影子根。