Read from textContent rather than innerHTML during rehydrate

[keeganstreet]

Resolves #3567

Sorry about the lack of tests. I tried adding the following test but it passes even without this change, so it's not particularly useful. I think that innerHTML behaves differently in actual browsers compared with the environment where the Jest tests are run (JSDOM?)

packages/styled-components/src/sheet/test/Rehydration.test.js

  it('supports > characters in selectors when style is inside another element', () => {
    document.body.innerHTML = `
      <svg>
        <style ${SC_ATTR} ${SC_ATTR_VERSION}="${SC_VERSION}">
          .b > * {}/*!sc*/
          ${SC_ATTR}.g22[id="idB"]{content:"nameB,"}/*!sc*/
        </style>
      </svg>
    `;
    const sheet = new StyleSheet({ isServer: true });
    rehydrateSheet(sheet);
    expect(sheet.getTag().getGroup(22)).toBe('.b > * {}/*!sc*/\n');
  });

[quantizor]

I want to say we use innerHTML because textContent actually had buggy behavior in IE. @kitten do you remember?

[kitten]

@probablyup I don't quite remember anymore. We could just retest it. As long as we use textContent though, we should be fine. However, innerText is usually the one that's inconsistent and to avoid.

[quantizor]

Thanks!

[quantizor]

@keeganstreet Mind adding a quick changelog entry before I merge?

[keeganstreet]

@probablyup sure, done 👍

Would you like another PR to apply this to the legacy-v5 branch?

[quantizor]

@probablyup sure, done 👍

Would you like another PR to apply this to the legacy-v5 branch?

Sure, go ahead.