Hi all, 

After upgrade to Winter 21, I found Lightning Design System show weird in IE-11. Please see follow image.

And this is my code.

<apex:page sidebar="false" lightningStylesheets="true" showHeader="false" docType="html-5.0">
    <apex:slds></apex:slds>
    <button class="slds-button">Button</button>
    <button class="slds-button slds-button_neutral">Neutral Button</button>
    <button class="slds-button slds-button_brand">Brand Button</button>
    <button class="slds-button slds-button_outline-brand">Outline Brand Button</button>
    <button class="slds-button slds-button_destructive">Destructive Button</button>
    <button class="slds-button slds-button_text-destructive">Text Destructive Button</button>
    <button class="slds-button slds-button_success">Success Button</button>    
</apex:page>

You can see all SLDS style not work.

I check Winter 21 Release Note and I found "Customize Components with Lightning Design System Styling Hooks (Beta)" update in Lightning Design System. Here is the Link: https://releasenotes.docs.salesforce.com/en-us/winter21/release-notes/rn_slds_styling_hooks.htm

In this document I found follow content:

Styling hooks make it easy to customize component styling and express your brand, especially when working with web components and shadow DOM. For a list of component blueprints that support styling hooks, see the Lightning Design System website.

As far as I know IE-11 not support this feature, please see this link: https://developer.mozilla.org/en-US/docs/Web/CSS/var

And I try open Lightning Design System's Button component page in IE-11, but I got a blank area.


I also found some error in Browser's console. But I don't know if it related to this case.


Since this is a beta function may I ask how to disabled it? Or if this is a knowing issue in Salesforce? 

Best wishes,

Lee