Как правильно импортировать HTML с помощью элементов Polymer?

Скажем, у меня есть элементы A и B. Импорт в B:

<!-- Imports in B -->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../another-element/another-element.html">

Теперь я хочу использовать B в A. Каков «правильный» способ импортировать B? Должен ли A просто импортировать B вот так?

<!-- Imports in A: Method 1 -->
<link rel="import" href="../element-b/element-b.html">

Или A также должен импортировать весь импорт, используемый B, как показано ниже?

<!-- Imports in A: Method 2 -->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../another-element/another-element.html">
<link rel="import" href="../element-b/element-b.html">

Если собственные полимерные элементы Google могут быть полезны, ответом будет метод 2, то есть импорт всех зависимых htmls. Но если это так, то синтаксис «импорта» в Polymer / WebComponents, кажется, нарушает инкапсуляцию без очевидной причины. Например, вот элемент «paper-dropdown-menu» из Polymer:

https://github.com/PolymerElements/paper-dropdown-menu/blob/master/paper-dropdown-menu.html

Он импортирует файл "paper-input.html", который имеет собственный импорт:

https://github.com/PolymerElements/paper-input/blob/master/paper-input.html

В обоих элементах используются следующие 2 импорта:

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">

Если paper-dropdown-menu.html уже импортирует paper-input.html, почему же paper-dropdown-menu нужно снова импортировать polymer.html и iron-form-element? Проблема в том, что импорт может очень быстро выйти из-под контроля при составлении приложения с множеством элементов. Да, я знаю вулканизировать. Но я не понимаю, как это помогает процессу разработки при создании или использовании элемента. Кроме того, инкапсуляция означает, что A не нужно знать внутренние части B в приведенном выше примере. Или Polymer / Webcomponent действительно говорит, что импорт HTML в компонент является частью «общедоступного интерфейса» этого компонента?


web-component polymer
person geg    schedule 26.01.2016    source источник
comment
Похоже, импорт будет удален в марте 2018 г .: Планируется ли удалить HTML imports entirely? Yes - but ... plan is still unclear ... Blink is the only engine that implements HTML imports, and no other browsers are likely to implement it. So HTML imports will get into a dead-end some time in the future (источник). Также см. импорт полимеров не рекомендуется   -  person surfmuggle    schedule 26.11.2017

Ответы (2)


arrow_upward
1
arrow_downward

Просто импортируйте элементы, от которых вы напрямую зависите. Вы можете игнорировать транзитивные зависимости, потому что они в любом случае импортируются в элементы, которые вы импортируете напрямую. Вдобавок каждый элемент должен импортировать <link rel="import" href="../polymer/polymer.html">.

person Günter Zöchbauer    schedule 26.01.2016

arrow_upward
0
arrow_downward

Метод 1 - это «лучше». Каждый полимерный элемент должен связывать свои собственные зависимости, поэтому при использовании он может работать сам по себе.

Метод 2 не так хорош, вы дважды повторно импортируете импорт элемента B, что является пустой тратой полосы пропускания, особенно когда вы не используете функцию (например, встроенные полимеры importHref), которая проверяет, был ли элемент уже импортирован прежде чем получить его снова.

person Nelson Owalo    schedule 26.01.2016