App-shell or Universal apps are unable to set css variables in document

Bug Report

Is this a regression?

No

Description

Unable to set css variables in documentElement for app-shell or universal

Minimal Reproduction

https://github.com/richardsengers/theming

ng run app-shell

Exception or Error

ERROR TypeError: Cannot read property 'type' of undefined
    at TokenStream.LA (C:\sources\playground\dynamic-theming\dist\dynamic-theming-demo\server\main.js:1204:30)
    at TokenStream.advance (C:\sources\playground\dynamic-theming\dist\dynamic-theming-demo\server\main.js:1077:20)
    at Parser._readDeclarations (C:\sources\playground\dynamic-theming\dist\dynamic-theming-demo\server\main.js:3796:42)
    at Parser.parseStyleAttribute (C:\sources\playground\dynamic-theming\dist\dynamic-theming-demo\server\main.js:3975:22)
    at parseStyles (C:\sources\playground\dynamic-theming\dist\dynamic-theming-demo\server\main.js:38557:10)
    at CSSStyleDeclaration.value (C:\sources\playground\dynamic-theming\dist\dynamic-theming-demo\server\main.js:38676:22)
    at ThemingService.setColorVariable (C:\sources\playground\dynamic-theming\dist\dynamic-theming-demo\server\main.js:57644:45)
    at C:\sources\playground\dynamic-theming\dist\dynamic-theming-demo\server\main.js:57546:22
    at Array.forEach (<anonymous>)
    at C:\sources\playground\dynamic-theming\dist\dynamic-theming-demo\server\main.js:57541:26
    at Array.forEach (<anonymous>)
    at ThemingService.setupMainPalettes (C:\sources\playground\dynamic-theming\dist\dynamic-theming-demo\server\main.js:57535:45)
    at SafeSubscriber._next (C:\sources\playground\dynamic-theming\dist\dynamic-theming-demo\server\main.js:57524:18)
    at SafeSubscriber.__tryOrUnsub (C:\sources\playground\dynamic-theming\dist\dynamic-theming-demo\server\main.js:40357:16)
    at SafeSubscriber.next (C:\sources\playground\dynamic-theming\dist\dynamic-theming-demo\server\main.js:40296:22)
    at Subscriber._next (C:\sources\playground\dynamic-theming\dist\dynamic-theming-demo\server\main.js:40246:26)

Your Environment

Angular Version:

Angular CLI: 11.0.1
Node: 14.17.0
OS: win32 x64

Angular: 11.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.1
@angular-devkit/build-angular   0.1100.1
@angular-devkit/core            11.0.1
@angular-devkit/schematics      11.0.1
@angular/cli                    11.0.1
@angular/platform-server        11.0.9
@schematics/angular             11.0.1
@schematics/update              0.1100.1
rxjs                            6.6.3
typescript                      4.0.5

Anything else relevant? This has also been described in this issue: https://github.com/angular/angular/issues/36137

[Roman-Simik]

We needed to make it work in SSR, because the HTML generated from SSR would be otherwise broken due to css vars not applied.

How we managed to make it work (Instead of calling element.setProperty(xxx, xxx)):

// dynamically create CSS var declaration like in css

const styleString = '--var-xx: blue; --var-xxx: 10px'

// then apply it to some html element
// note that TS will complain for the style property because it is marked as readonly and cannot be changed, 
// so you need to bypass it by @ts-ignore
htmlElement.style = styleString

//or create style element. and add it into dom
const styleElm = document.createElement('style')
styleElm.style = styleString

document.body.appendChild(styleElm)

This will ensure the css styles are correctly applied also in the generated html which is returned from SSR.

[alan-agius4]

This indeed appears to be an issue with Domino, which doesn’t support the latest browser features.

Therefore, this is blocked until we switch over to a new JavaScript DOM API. //cc @kyliau