document.getElementById(divId);
を使用するPolymer 1.7要素にJavascriptライブラリを統合しようとしています。私のポリマー要素は次のようなものになります。JS libのdocument.getElementById()の使用方法
<template>
<div id="libDiv"></div>
<button on-tap="go">Go!</button>
</template>
<script src="https://some-provider.com/greatlib.js"></script>
<script>
Polymer({
is: 'lib-test',
go: function() {
GreatLib.render('libDiv');
}
});
</script>
をライブラリgreatlib.js
はこのようなものになります:原因document.getElementById(divId)
の
var GreatLib = (function() {
var render = function(divId) {
document.getElementById(divId).innerHTML = 'GreatLib is great!';
};
return {render: render};
}());
を、それが上の影DOMでありませんので、私のdiv要素を見つけることができません主な文書
これを回避し、document.getElementById(divId)
が "GreatLib"を変更せずに、私のポリマー要素の要素を見つけさせる方法はありますか?
Chromeで次の例を実行します。
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<!--Use shadow DOM if available -->
<script>
window.Polymer = {
dom: 'shadow'
};
</script>
<link href="polymer/polymer.html" rel="import">
<dom-module id="x-example">
<style></style>
<template>
<div id="libDiv"></div>
<button on-tap="go">Go!</button>
</template>
<script>
var GreatLib = (function() {
var writeTextToDiv = function(divId) {
console.log('divId', divId);
console.log('document.getElementById(divId)', document.getElementById(divId));
document.getElementById(divId).innerHTML = 'GreatLib is great!';
};
return {
writeTextToDiv: writeTextToDiv
};
}());
Polymer({
is: 'x-example',
go: function() {
GreatLib.writeTextToDiv('libDiv');
}
});
</script>
</dom-module>
<x-example></x-example>
ドキュメント.getElementByIdは、要素が存在する場合、シャドーDOMにアクセスできます – gb2d
私はどのように表示されません。この例では、getocument.getElementById(divId) 'はnullを返します。これがそうでない場合はどのような例がありますか? – Svante
あなたはロードページの前にメソッドを呼び出すかもしれませんか? –