[labs/ssr] Remove deprecated `shadowroot` attribute from emitted DSD

[augustjk]

Should this be an RFC?

• [X] This is not a substantial change

Which package is this a feature request for?

SSR (@lit-labs/ssr)

Description

Currently we include both the old shadowroot attribute and the new shadowrootmode attribute on <template> elements of the generated DSD.

Chromium was the only one that was supporting the shadowroot attribute. It began shipping streaming DSD with the new shadowrootmode attribute in Chromium 111 along with Webkit early this year. https://chromestatus.com/feature/5161240576393216 https://bugs.webkit.org/show_bug.cgi?id=249513

The non-standard shadowroot attribute has been marked deprecated since Chromium 112, to be removed in Chromium 119. https://chromestatus.com/feature/6239658726391808

The template shadowroot ponyfill was already updated to look for shadowrootmode instead of shadowroot here https://github.com/webcomponents/template-shadowroot/pull/43

Alternatives and Workarounds

n/a

[bharathkalyans]

Can I work on this?

[rictic]

@bharathkalyans go for it!

The largest part of the work here is likely going to be updating many assertions in our tests, which expect both to be present. Feel free to reach out in the development channel of our discord server if you run into problems!

[bharathkalyans]

@rictic both to be present means, shadowroot and shadowrootmode right?

[bharathkalyans]

For eg.

test(`consumer receives a context`, async () => {
    assert.strictEqual(consumer.onceValue, 1000);
    assert.strictEqual(consumer.subscribedValue, 1000);
    assert.strictEqual(consumer.controllerContext.value, 1000);
    await consumer.updateComplete;
    assert.equal(
      stripExpressionComments(consumer.shadowRoot!.innerHTML),
      '1000'
    );
  });

The new test has to be

test(`consumer receives a context`, async () => {
    assert.strictEqual(consumer.onceValue, 1000);
    assert.strictEqual(consumer.subscribedValue, 1000);
    assert.strictEqual(consumer.controllerContext.value, 1000);
    await consumer.updateComplete;
    
    const innerHTML = consumer.shadowRoot!.mode === 'open'
        ? stripExpressionComments(consumer.shadowRoot!.innerHTML)
        : stripExpressionComments(consumer.innerHTML);

    assert.equal(innerHTML, '1000');
});

[augustjk]

No we're talking test assertion like these https://github.com/lit/lit/blob/1af7991c27456c7e6073a3ee6f18f102c2adc026/packages/labs/ssr/src/test/lib/render-lit_test.ts#L283

They have both attributes but after the change they should only contain shadowrootmode="open"