Using Shadow Dom (with Polymer) in Android 4.4 Webview

[legoff....@gmail.com]

Hello Polymerers,

I'm actually building a web app using custom Polymer elements but I encountered a serious problem.

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.

Here is a simple illustration of my problem :

---

<!-- custom-elt.html -->
<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="custom-elt">

    <template>
        <div id="elt">some content</div>
    </template>

    <script>
        Polymer('custom-elt',{
            getElt: function(){
                return this.shadowRoot.getElementById('elt');
            }
        });
    </script>

 </polymer-element>

---

// script.js
window.addEventListener('polymer-ready',function(){
    var e = document.getElementsByTagName('custom-elt')[0];
    alert(e.getElt().innerHTML);
});

---

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 (http://caniuse.com/#feat=shadowdom), but I didn't find a way to use it with the prefix.

Any solution ?

Thanks

Baptiste

[Thomas Amsler]

Here is some info about the Android WebView:

https://developer.chrome.com/multidevice/webview/overview

-- Thomas