Блог

Я разрабатываю проект веб-компонента на основе polymer 2.0. Я использую концепцию part в polymer для разграничения различных аспектов элемента. Поскольку мне нужен другой стиль для определенной части, я применяю стиль к этой конкретной части с помощью ::part() после импорта этого в другие HTML-файлы.

Пример кода приведен ниже.

 <customElement>
<div part="samplePart">
demo
</div>
//other tags
</customElement>
  

И элемент стиля выглядит следующим образом.

 customElement::part(samplePart){
//some styles
}
  

Этот подход отлично работает в Google Chrome. Но проблема в том, что когда я использую браузер Microsoft-edge, он не считывает элемент «part» и не применяет любой стиль по умолчанию ко всему элементу.

Есть идеи, как добиться этого в Edge? Я не предпочитаю изменять HTML-часть, поскольку я импортирую этот элемент в несколько независимых файлов, которым требуется другой стиль.

Согласно документу polymer, я создаю образец и тестирую код, я мог бы воспроизвести проблему, но из официального документа и проблем с polymer я не нахожу решения этой проблемы, я предлагаю вам связаться с командой polymer или опубликовать эту проблему в the polymer issues.

В качестве обходного пути вы могли бы попробовать использовать следующий код, чтобы добавить стиль css для samplePart:

 customElement > div[part='samplePart'] {
    width: 200px;
    height: 200px;
    background-color: antiquewhite
}