title: Using shadow-dom (Polymer) in Android 4.4 Webview
body: <p>I'm actually building a web app using custom Polymer elements (which is based on web-components and shadow-dom) but I encountered a serious problem.</p>
  
  <p>I want this app to run on an Android 4.4 WebView, but I experienced some issues with the shadow-dom when testing the app on the WebView, although it works perfectly fine on Chrome (Android and Desktop).
  This problem occurs when I try to access a shadowRoot element from CSS (with ::shadow or /deep/) or from pure js.</p>
  
  <p>Here is a simple illustration of my problem :</p>
  
  <hr>
  
  <pre><code>&lt;!-- custom-elt.html --&gt;
  &lt;link rel="import" href="../bower_components/polymer/polymer.html"&gt;
  
  &lt;polymer-element name="custom-elt"&gt;
  
      &lt;template&gt;
          &lt;div id="elt"&gt;some content&lt;/div&gt;
      &lt;/template&gt;
  
      &lt;script&gt;
          Polymer('custom-elt',{
              getElt: function(){
                  return this.shadowRoot.getElementById('elt');
              }
          });
      &lt;/script&gt;
  
   &lt;/polymer-element&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>// script.js
  window.addEventListener('polymer-ready',function(){
      var e = document.getElementsByTagName('custom-elt')[0];
      alert(e.getElt().innerHTML);
  });
  </code></pre>
  
  <hr>
  
  <p>Works perfectly on Chrome, but not in the WebView.
  According to caniuse.com, shadow-dom is supported by Android 4.4 browser (which is used by the WebView right ?) with the 'webkit' prefix (<a href="http://caniuse.com/#feat=shadowdom" rel="noreferrer">http://caniuse.com/#feat=shadowdom</a>), but I didn't find a way to use it with the prefix.</p>
  
  <p>Any solution ?</p>
  
  <p>Thanks</p>
  
  <p>Baptiste</p>