полимерный веб-компонент #shadow root не отображается

Я пытаюсь запустить простой полимерный веб-компонент на локальном сервере на моем mac.полимерный веб-компонент #shadow root не отображается

Я думаю, что правильно следил за учебником, но корневая информация #shadow не появляется в теге элемента (как вы можете видеть на изображении).

Импорт работает, потому что импортируется файл polymer.html. Я не могу понять, почему информация не отображается с элементом, который я настроил. Когда я запускаю его в сафари, H1 появляется ненадолго (менее секунды), а затем исчезает, так что это говорит о том, что полимер настроен правильно, он просто не втягивается в корень # тени, по какой-то причине ...

Я боролся с этим на пару дней.

любой помощи вы можете дать бы BER большой и спасти меня много больше головной боли :)

Приветствие ребят !!

THIS IS THE OUTPUT ON THE LOCAL HOST SERVER... 
 

 

 
<html><head><style>body {transition: opacity ease-in 0.2s; } 
 
body[unresolved] {opacity: 0; display: block; overflow: hidden; position: relative; } 
 
</style> 
 
    <!-- 1. Load platform support before any code that touches the DOM. --> 
 
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> 
 
    <!-- 2. Load the component using an HTML Import --> 
 
    <link rel="import" href="bower_components/polymer/polymer.html"> 
 

 
    </head> 
 
    <body> 
 
    
 
    <polymer-element name="bens-element" noscript=""> 
 
     
 
     <template> 
 
      
 
      <h1>This is the shadow dom</h1> 
 
     </template> 
 
    </polymer-element> 
 
    <!-- 3. Declare the element by its tag. --> 
 
    <bens-element></bens-element> 
 
    
 
</body></html>

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <!-- 1. Load platform support before any code that touches the DOM. --> 
 
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> 
 
    <!-- 2. Load the component using an HTML Import --> 
 
    <link rel="import"href="bower_components/polymer/polymer.html"> 
 

 
    </head> 
 
    <body> 
 
    
 
    <polymer-element name="bens-element" noscript> 
 
     
 
     <template> 
 
      
 
      <h1>This is the shadow dom</h1> 
 
     </template> 
 
    </polymer-element> 
 
    <!-- 3. Declare the element by its tag. --> 
 
    <bens-element></bens-element> 
 
    </body> 
 
</html>

источник

2015-05-25 ben charman

Safari не имеет нативную поддержку теневой йот еще. Он может запускать ваше полимерное приложение, используя полисы. Стандарт веб-компонента пока не поддерживается в большинстве браузеров. Запустите приложение на Google Chrome. Вы увидите #shadow root.

~~Проверить эту страницу информации для browser compatibility~~

~~unresolved атрибут используется для обозначения, что страница еще не инициализирован.~~

Edit:

Они вызывают Вас проблемы -

Вы используя помеченную версию зависимостей

Я попробовал здание, используя версию которые вы используете. Тот же результат. Я проверил и только что помеченные релизы. Полимер все еще находится в стадии бета-тестирования и переживает тяжелое развитие. Последний выпуск из репо, который вы должны использовать, - полимер 0.9.0 и webcomponentsjs 0.6.1

Это зависимость от полимера, вызывающая поведение в вашем случае. Потому что я использую webcomponentsjs 0.7.0 для всех разработок. Используйте беседу для разрешения ваших зависимостей. Будет проще, если вы удалите папку bower_components в bower.json и переустанавливать зависимости

Тег должен содержать тело неразрешенный атрибут.

Это сделано, чтобы предотвратить неразрешенные данные креплений и правила не отображались в браузере. Потому что пользовательские элементы полимера требуют времени для инициализации. В противном случае вы увидите много символов двойной усы - {{}} на странице для привязок данных, а также отсутствие правил стиля или пустую страницу.

WebComponents.js добавляет правила стиля для селектора body[unresolved] на страницу, когда она инициализирована. Он устанавливает непрозрачность 0 - невидимую. Таким образом, содержимое пока не отображается.

После того, как Polymer успешно инициализировал все пользовательские элементы, шаблоны и привязки данных разрешены, он удаляет атрибут unresolved. Эта страница исчезает в представлении более 200 мс из-за другого правила стиля body, добавленного при инициализации webcoponents.

Проверьте тег заголовка для этих двух правил стиля, добавленных при инициализации страницы.

источник

2015-05-25 21:40:38

привет, новый, спасибо за ответ. Я запустил приложение в хроме, и у меня получился тот же результат. Ничего не показывает. Я только запускал его в сафари из любопытства: S –

Я не думаю, что полимер.html импортируется. Я проверил, что правила стиля, вставленные в тег '', также вставляются 'webcomponents.js' Еще раз проверьте импорт полимера! Какая версия полимера и webcomponents.js вы используете? Проверьте это в bower.json –

И вы пропустили «неразрешенный» атрибут в теге body. –

полимерный веб-компонент #shadow root не отображается

ответ

Смежные вопросы