Polymer 2: ::part() in polymer is not compatible with Microsoft-Edge and IE

[jjoyk]

Description

::part() selector in the css of a polymer component which is used to identify the elements of child web components is not recognized by Microsoft-Edge and Internet Explorer while working properly with Chrome and Firefox

Steps to Reproduce

1. Create 'custom-element' with following code structure

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

2. import this web element to another web element(parent web element)

3. update the style of "samplePart" using ::part() selector in the parent web elemet. Sample code as follows

   #customElementId::part(samplePart){
   //some styles
   }
   <customElement id="customElementId"></customElement>

   The style of div element with part "samplePart" should get the specified style defined in the parent web component in all browsers

   Actual Results

   While proper style is getting applied to the div element in Chrome and Firefox, the default style is getting applied in case of Microsoft-Edge and IE

   Browsers Affected

   • [ ] Chrome
   • [ ] Firefox
   • [x] Edge
   • [ ] Safari 11
   • [ ] Safari 10
   • [x] IE 11

   Versions

   • Polymer: v2 and v3

[lkraav]

What about [part=samplePart]?

[jjoyk]

What about [part=samplePart]?

I tried with this but still, the issue is reproducible. In edge browser, the CSS style of the element is not updated

[kevinpschaaf]

CSS Shadow Parts and the new ::part(...) CSS syntax are a new browser feature that is only natively supported in Chrome as of today. There is broad browser implementor support for the feature and we expect it will be shipped on the other browsers. You mention it working on Firefox, but I would only expect it to work natively in Chrome today (https://jsbin.com/vulopa/edit?html,console,output).

The ShadyCSS polyfill does not currently support polyfilling the ::part syntax. We do have a proof-of-concept shim working in LitElement, and are investigating the feasibility of whether it can be made into a general polyfill vs. a LitElement-specific feature.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed after being marked stale. If you're still facing this problem with the above solution, please comment and we'll reopen!