JS libのdocument.getElementById（）の使用方法

Question

document.getElementById(divId);を使用するPolymer 1.7要素にJavascriptライブラリを統合しようとしています。私のポリマー要素は次のようなものになります。

<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>

Answer 1

私はポリマーもshadowDOMを知らない、と私はそれに少しを学ぶための口実として、この質問の機会を得ました。

最初に、あなたのshadowDOMを取得するためにIDを使用するのは良い考えのようには思えません。また、注意として、shadowDOMはページの構造を隠す方法です。

here is one Q/Aしかし、私が結論に至るのを手伝ってくれたのは、document.getElementyIdが正しいツールではないということです。

しかし、あなたがそれにアクセスすることができますので、ここでdocument.querySelectorのおかげと::shadowセレクタは、おそらく誰もが使用されるべきではない恐ろしいハックですが、動作するように思われる：

(function(){ 
 
    // first check selector support 
 
    try{ 
 
    document.querySelector('::shadow'); 
 
    } 
 
    catch(e){ 
 
    return; // not supported don't change anything 
 
    } 
 
    var gbi = document.getElementById.bind(document); 
 
    document.getElementById = function(_id){ 
 
    var el = gbi(_id); // first try the original one 
 
    if(el){ 
 
     return el; 
 
     } 
 
    else // nothing, try in the shadow 
 
     return document.querySelector('*::shadow #' + _id); 
 
    } 
 
    })()

<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>