Правилният начин за импортиране на html с Polymer елементи?

Да кажем, че имам елемент A и B. Импортирането в B е:

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

Сега искам да използвам B в A. Какъв е "правилният" начин за импортиране на B? Трябва ли A просто да импортира B по този начин?

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

Или A също трябва да импортира всички импортирания, използвани от B, както следва?

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

Ако собствените Polymer Elements на Google могат да бъдат от някакво ръководство, отговорът изглежда е метод 2, т.е. импортиране на всички зависими html. Но ако случаят е такъв, синтаксисът "импортиране" в 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="/bg../polymer/polymer.html">
<link rel="import" href="/bg../iron-form-element-behavior/iron-form-element-behavior.html">

Ако paper-dropdown-menu.html вече импортира paper-input.html, защо paper-dropdown-menu трябва отново да импортира polymer.html и iron-form-element? Проблемът с това е, че импортирането може да излезе извън контрол много бързо, когато композирате приложение с много елементи. Да, познавам Vulcanize. Но не виждам как това помага на процеса на разработка, когато човек създава или използва елемент. В допълнение, капсулирането означава, че 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="/bg../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