聚合物中的 ::part() 与 Microsoft-Edge 不兼容

Question

I am developing a web-component project based on polymer 2.0. I am using the part concept in polymer to differentiate different aspect of an element. Since I need different style to a specific part, I am applying style to this specific part using ::part() after importing this to other HTML files.

Sample code is as followed.

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

And style element is as followed.

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

This approach is working fine in google chrome. But the problem is that when I am using Microsoft-edge browser, it is not reading the "part" element and applying whatever default style to the whole element.

Any idea how to achieve this in Edge? I do not prefer changing the HTML part as I am importing this element to multiple independent files which need different styling.

Answer 1

According to the polymer document , I create a sample and test the code, I could reproduce the problem, but from the official document and polymer issues , I'm not finding the solution for this issue, I suggest you could contact polymer team or post this issue to the polymer issues .

As a workaround, you could try to use the following code to add css style for the samplePart:

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