我需要创建一个镀铬扩展名,该扩展可以自动与用聚合物编写的Web应用程序进行一些交互。
我有这个生成的html:
<paper-input id="value-input" label="Value" no-label-float="" tabindex="0" aria-disabled="false">
<paper-input-container class="style-scope paper-input">
<template is="dom-if" class="style-scope paper-input-container"></template>
<div class="input-content style-scope paper-input-container">
<div class="label-and-input-container style-scope paper-input-container" id="labelAndInputContainer">
<label aria-hidden="true" slot="label" class="style-scope paper-input" for="input-2"
id="paper-input-label-2">Value</label>
<input is="iron-input" slot="input" class="input-element style-scope paper-input" autocomplete="off"
placeholder="" autocapitalize="none" autocorrect="off" aria-describedby=""
aria-labelledby="paper-input-label-2" tabindex="0" id="input-2">
</div>
</div>
<div class="underline style-scope paper-input-container">
<div class="unfocused-line style-scope paper-input-container"></div>
<div class="focused-line style-scope paper-input-container"></div>
</div>
<div class="add-on-content style-scope paper-input-container"></div>
</paper-input-container>
</paper-input>
此输入是较大(聚合物(形式的一部分,仅在输入中写入某些内容时,提交按钮才能启用。
不幸的是,天真地做document.querySelector('#input-2').value = 'something'
不会起作用。
该按钮仍然禁用。为了使按钮启用,我需要利用聚合物提供的API到升级的元素。
因此,document.querySelector('paper-input').updateValueAndPreserveCaret('something')
(使用聚合物元素的updateValueAndPreserveCaret
方法(将起作用。该按钮将被通知并启用。
问题
从我的扩展程序的内容脚本内部,我似乎无法访问聚合物将其应用于自定义组件的任何属性/方法。
例如,如果我尝试从内容脚本内部使用document.querySelector('paper-input').updateValueAndPreserveCaret('something')
,我会发现updateValueAndPreserveCaret
不确定的错误。
这不仅适用于聚合物提供的方法,还适用于属性(例如document.querySelector('paper-input').$
也是未定义的(
这是我无法访问属性和功能的情况,因为它们是在其他window
上下文中创建的?
我建议this.shadowroot.queryselector('纸输入'(可以在聚合物3.0中使用。目前,许多使用this.shadowroot.queryslector(''(的聚合物程序员。