Веб-компонент SSR с использованием puppeteer - PullRequest
Новая
       33

Веб-компонент SSR с использованием puppeteer

1 голос
/ 11 июля 2020

Я пытаюсь использовать кукольник для рендеринга простого веб-компонента, используя этот код: 

async function ssr(url) {
  const start = Date.now();
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setJavaScriptEnabled(true);
  await page.goto(url, { waitUntil: 'networkidle0' });
  await page.waitForSelector('#hello');

  const html = await page.content();

  await browser.close();

  const ttRenderMs = Date.now() - start;
  console.info(`Headless rendered page in: ${ttRenderMs}ms`);

  return { html, ttRenderMs };
}

Это то, что он пытается загрузить: 

<!DOCTYPE html>
<html>

<head>
  <title>Lit + SSR</title>
</head>

<body>
  <script type="module">
    import { LitElement, html } from 'lit-element';

    export class HelloElement extends LitElement {
      static get properties() {
        return {
          name: { type: String }
        };
      }

      render() {
        return html`
          Hello, <b>${this.name}</b>!
        `;
      }
    }

    customElements.define('x-hello', HelloElement);
  </script>

  <x-hello id="hello" name="Ninja"></x-hello>
</body>

</html>

Пока кукловод может правильно отрисовывать страницу (проверено page.screenshot), page.content или page.evaluate(() => document.documentElement.innerHTML) не возвращают теневой DOM и поэтому бесполезны.

Как заставить кукольника вернуть мне разметку, которая включает тень root?

...