在Android 4.4 Webview中使用shadow-dom(Polymer)

Question

我实际上正在使用自定义Polymer元素(基于web组件和shadow-dom)构建Web应用程序,但我遇到了一个严重的问题.

我希望这个应用程序在Android 4.4 WebView上运行,但是当我在WebView上测试应用程序时,我遇到了shadow-dom的一些问题,尽管它在Chrome(Android和桌面)上运行得非常好.当我尝试从CSS(使用:: shadow或/ deep /)或从纯js访问shadowRoot元素时,会发生此问题.

这是我的问题的简单说明:

---

<!-- 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);
});

---

适用于Chrome,但不适用于WebView.根据caniuse.com的说法,shadow-dom是由Android 4.4浏览器(WebView使用的吗？)和'webkit'前缀(http://caniuse.com/#feat=shadowdom)支持的,但我没有'找到一种方法将它与前缀一起使用.

有解决方案吗

谢谢

巴蒂斯特

Answer 1

这是在聚合物网站上：

在没有本机 Shadow DOM 的浏览器上，使用该wrap函数来访问元素上的方法和属性：

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

以下是有关 ShadowDOM 和 polyfill 的更多文档：https ://www.polymer-project.org/docs/polymer/debugging.html#shadowdom

这让我想问，你是否包括当前的polyfill？https://github.com/furier/WebComponents

它最近刚刚在 0.5 版本中发生了变化，是一个突破性的变化。