在Android 4.4 Webview中使用Shadow-dom（聚合物）

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的說法，具有“ webkit”前綴（ http://caniuse.com/#feat=shadowdom ）的Android 4.4瀏覽器（由WebView使用嗎？）支持shadow-dom，但我沒有這樣做。找不到使用前綴的方法。

有什么辦法嗎？

謝謝

巴蒂斯特

Answer 1

這是在聚合物站點上：

在沒有本地影子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版本中進行了更改，這是一個重大更改。