Нативный и полифиллированный теневой DOM

Я работаю над проектом, в котором я строю граф с несколькими узлами и ребрами, используя Polymer и веб-компоненты. Я использую базовую библиотеку, разработанную моей компанией, которая не основана на веб-компонентах. Эта библиотека содержит функции для создания узлов, инициализации графа и т. д. Я создал пользовательский элемент, называемый графом, который будет взаимодействовать с библиотекой. Ниже приведено объявление этого элемента:

<polymer-element name="cmp-graph" attributes="canvas" constructor="CMPGraph">

<template>  
      <div id="graph_win_placeholder">
        <div id="graph_win" class="canvas">
            <div id="graph_canvas" class="graph-area">
            </div>
        </div>            
      </div>
</template>

</polymer-element>

В моем Javascript-коде элемента я вызываю функцию в библиотеке для инициализации графа. Этому вызову функции требуется дескриптор элемента div холста (элемента div с id="graph_canvas"). Поэтому я передаю this.$.graph_canvas в качестве параметра при вызове функции. Но библиотека выдает исключение, поскольку она ожидает нативную версию div и вместо этого получает обернутую версию, поскольку this.$.graph_canvas соответствует обернутой версии div.

Я экспериментировал с различными решениями и передавал shadow=native в качестве параметра в строке запроса при загрузке моего приложения.

Но теперь проблема в том, что мое приложение может работать только в Chrome, Canary и Opera, поскольку другие браузеры не имеют встроенной поддержки Shadow DOM. Есть ли другой способ решить эту проблему?

Любая помощь будет оценена.

Спасибо.


polymer shadow-dom
person cutiecatie    schedule 11.03.2014    source источник
comment
Этот вопрос был задан на полимерном разработчике с некоторыми последующими действиями: groups.google. .com/forum/#!msg/polymer-dev/twfdXBpT1cM/   -  person ebidel    schedule 11.03.2014
comment
Какое исключение выбрасывается?   -  person robdodson    schedule 12.03.2014
comment
Без дополнительной информации о вашей внутренней библиотеке на этот вопрос невозможно ответить.   -  person Peter Burns    schedule 03.07.2014

Ответы (1)


arrow_upward
0
arrow_downward

Если в вашей библиотеке нет проблем с архитектурой, в крайнем случае вы можете перевернуть узел непосредственно перед использованием. Не забудьте проверить, присутствует ли Polyfill на странице или нет, иначе приведенный ниже код сломается в chrome.

if(typeof ShadowDOMPolyFill !== undefined)
{
    var unwrappedNode = ShadowDOMPolyFill.unwrap(node);
}
person Abhinav    schedule 04.10.2015
comment
Спасибо, Абхинав. Я действительно использовал тот же подход. Мне пришлось развернуть узел, когда используется Polyfill, и это решило проблему. - person cutiecatie; 05.10.2015