Проблема с вложенными полимерными компонентами

foo.html:

<link rel="import" href="bar.html">
<dom-module id="p-foo">
    <template>
        <p-bar>
            <content select=".myContent"></content>
        </p-bar>
    </template>
    <script>
        Polymer( {
            is: 'p-foo',
        } )
    </script>
</dom-module>

бар.html:

<dom-module id="p-bar">
    <template>
        bar open
        <content select=".myContent"></content>
        bar closed
    </template>
    <script>
        Polymer( {
            is: 'p-bar',
        } )
    </script>
</dom-module>

демо.html:

<!DOCTYPE html>
<html>
    <head>    
        ...
        <link rel="import" href="foo.html">
    </head>
    <body>
        <p-foo><div class="myContent"><strong>hello</strong></div></p-foo>
    </body>
</html>

Ожидаемый результат:

bar open
hello
bar closed

Что я иногда получаю:

bar open
bar closed
hello

Ошибка, которую я получаю, не воспроизводима на 100%. Это происходит только в процентном отношении, когда я обновляю страницу. Также оказывается, что чем сложнее содержание, тем выше вероятность возникновения ошибки.

Кажется, что полимер пытается выбрать .myContent до того, как компонент bar полностью отрендерится.


javascript polymer shadow-dom
person user1325159    schedule 13.09.2016    source источник
comment
Какая-то ошибка в примере, который вы вставили выше. Игнорируя тот факт, что элемент не может быть назван как foo и bar (отсутствует дефис -), bar open и bar closed будут напечатаны, поскольку вы использовали selector в теге содержимого. Не могли бы вы привести более подходящий пример, чтобы воспроизвести проблему, поскольку я не смог этого сделать ни разу.   -  person a1626    schedule 13.09.2016
comment
@ a1626 Я думаю, вы имеете в виду, что bar open и bar closed не будут напечатаны, потому что они не распространяются ни по одному <content>   -  person Tomasz Pluskiewicz    schedule 13.09.2016
comment
@TomaszPluskiewicz да. С текущим кодом тег content будет искать только вещи с классом myContent и отображать их. Все, кроме этого, будет игнорироваться.   -  person a1626    schedule 13.09.2016
comment
Я перепутал пример, я обновил пример, bar open и bar closed не должны были быть внутри тега <content>. Но это не было проблемой. Я до сих пор не знаю, почему он это делает.   -  person user1325159    schedule 13.09.2016

Ответы (1)


arrow_upward
1
arrow_downward

  1. Вам необходимо зарегистрировать новые пользовательские элементы с помощью вызова Polymer().

  2. Кроме того, как уже говорилось в комментариях, ваши пользовательские элементы должны содержать дефис. Например: <p-foo>и <p-bar>.

foo.html:

<link rel="import" href="bar.html">
<dom-module id="p-foo">
    <template>
        <p-bar>
            <content select=".myContent"></content>
        </p-bar>
    </template>
    <script>
        Polymer( {
            is: 'p-foo',
        } )
    </script>
</dom-module>

бар.html:

<dom-module id="p-bar">
    <template>
        bar open
        <content select=".myContent"></content>
        bar closed
    </template>
    <script>
        Polymer( {
            is: 'p-bar',
        } )
    </script>
</dom-module>

демо.html:

    <head>    
         ...
        <link rel="import" href="foo.html">
    </head>
    <body>
        <p-foo><div class="myContent"><strong>hello</strong></div></p-foo>
    </body>
</html>
person Supersharp    schedule 14.09.2016
comment
Извините, но это были просто оплошности в примере, но ошибка все еще возникает. Если я сделаю намного больше селекторов контента, а также усложню контент в этих селекторах (как в моих элементах и ​​т. д.), вероятность воспроизведения ошибки при обновлении резко возрастет. Похоже, это какое-то состояние гонки, когда, если страница полностью отображается до того, как Polymer сможет сделать этот выбор контента, он просто бросает все в этих элементах контента в нижнюю часть элемента. - person user1325159; 14.09.2016
comment
Приведенный выше пример работает отлично, и это не вопрос состояния гонки. Это работает для вас с Chrome по крайней мере? Можете ли вы предоставить достаточно информации, чтобы воспроизвести ошибку? - person Supersharp; 15.09.2016
comment
как я уже сказал, это очень небольшой процент времени, когда это испортится. Если вы усложните пример (добавите намного больше html), ваши шансы воспроизвести ошибку намного возрастут. Если вы сделаете это очень сложным, я думаю, что 1 из 4 обновлений воспроизведет ошибку. - person user1325159; 26.09.2016
comment
Ваша проблема возникает в Chrome? - person Supersharp; 26.09.2016
comment
Да, Chrome и, я думаю, любой другой браузер, который я тестировал. Но я Chrome точно. - person user1325159; 27.09.2016