Блог

Кажется, что полимер

 polyfill-next-selector { content: ':host #myId' }
  

Не работает (в IE) для VanillaJS <template> и пользовательских элементов.

Для <polymer-element> этого все работает нормально: http://codepen.io/robdodson/pen/FokEw /, но по какой-то причине, когда я пытаюсь сделать то же самое с собственным JS, это не

 <template>
  <style>
    polyfill-next-selector { content: ':host h1' }
    ::content h1 {
    color: red;
    }
  </style>
  ..ShadowDOM stuff..
  <content></content>
</template>

<my-element>
  <h1>Hello World, I'm red content of Custom Element</h1>
</my-element>
  

http://codepen.io/tomalec/pen/apqgr

shim-shadowdom атрибут также не помогает.

Есть ли какой-либо обходной путь, или я использую его неправильно?

Изменение стилей — это нечто polymer.js (подслащивание) делает это за вас автоматически. Он вставляет таблицы стилей -> <style> в элемент, подгоняет эти стили и добавляет их в заголовок документа под полизаполнением.

Если вы используете ванильный материал, вам придется выполнять подгонку вручную и добавлять вручную. Если вы включите shim-shadowdom атрибут в <style> или таблицу стилей, это действительно должно сработать, но все еще есть некоторое совпадение между polymer.js и platform.js .

Решение!…в createdCallback() :

 if (Platform.ShadowCSS) {
  var style = template.querySelector('style');

  var cssText = Platform.ShadowCSS.shimCssText(
      style.textContent, 'my-element');
  Platform.ShadowCSS.addCssToDocument(cssText);
}
  

Демонстрация:http://jsbin.com/xadocene/3/edit

Обратите внимание, я проверяю Platform.ShadowCSS , потому что он не существует в собственном Shadow DOM и нет необходимости выполнять дополнительную работу.

Смотрите http://www.polymer-project.org/docs/polymer/styling.html#manualshim для получения дополнительной информации.