CODEWITHSUNDEEP
cssgoogle-chromepolymermicrosoft-edgepolymer-2.x
TheDragonReborn
TheDragonReborn

Reputation: 161

::part() in polymer is not compatible with Microsoft-Edge

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.

Upvotes: 1

Views: 181

Answers (1)

Zhi Lv
Zhi Lv

Reputation: 21656

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
}

Upvotes: 1

Related Questions