Using shadow-dom (Polymer) in Android 4.4 Webview

Question

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.

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

Answer 1

This was on the polymer site:

On browsers without native shadow DOM, use the wrap function to access methods and properties on your element:

wrap($0).fire('my-event'); wrap($0).myproperty

Here is more documentation on the shadowDOM and polyfill: https://www.polymer-project.org/docs/polymer/debugging.html#shadowdom

That leads me to ask, are you including the current polyfill? https://github.com/furier/WebComponents

It just changed recently with the 0.5 build and is a breaking change.