SSR

Conditional templates

Putting ternaries or conditional in templates, particularly in child parts but also in the element's top level template, can break hydration

Uncaught (in promise) Error: Hydration value mismatch: Unexpected TemplateResult rendered to part
    m hydrate-lit-html.js:6
    f hydrate-lit-html.js:6
    update lit-element-hydrate-support.js:1
    performUpdate reactive-element.ts:1441
    scheduleUpdate reactive-element.ts:1338
    _$ET reactive-element.ts:1310
    requestUpdate reactive-element.ts:1268
    _$Ev reactive-element.ts:1017
    b reactive-element.ts:1000
    h lit-element.ts:122
    RhIcon rh-icon.js:47
    t custom-element.ts:60
    __decorate tslib.es6.mjs:58
    <anonymous> rh-icon.ts:58

If you get errors like those, try to replace ternaries with ?hidden. You can use role="none" to remove default semantics from landmark elements like <footer> as well

Konnor Rogers says:

I've found for conditionals based on isServer you need an hasUpdated check has well. The first hydration is very picky.

Justin Fagnani says:

Oh, man... I see why this is now, but that's a pain. There's a first hydration data issue...

const _isServer = !this.hasUpdated && isServer

classMap({ isServer: _isServer })