Re: [whatwg/dom] Declarative Shadow DOM (#831)

> I've put together a more "complicated" set of examples, aimed at measuring the performance of SSR (using the proposed declarative Shadow DOM implementation in Chrome) as compared to CSR with inline styles and adoptedStylesheets. I've written it up [here](https://github.com/mfreed7/declarative-shadow-dom/blob/master/perf_tests/clock_example/results.md). As a TL/DR, here is the conclusion paragraph:

It appears to me the most of overhead in non-SSR example comes from repeatedly executing innerHTML of the same markup in the constructor. If you modified each custom element you have so that it would parse the HTML just once & clone the nodes instead, I'm seeing ~30% improvement on my local machine:

```js
class Carousel extends HTMLElement {
  static createShadowContent() {
    if (!this._shadowContentTemplate) {
      const template = document.createElement('template');
      template.innerHTML = `
       <div id=border>
         <button id=goleft></button>
         <slot id=contents>Empty Carousel</slot>
         <button id=goright></button>
       </div>
       <style id=inlinestyles>${myStyles}</style>
       `;
       this._shadowContentTemplate = template.content;
    }
    return document.importNode(this._shadowContentTemplate, true);
  }

  constructor() {
    super();

    const useInlineStyles = styleType === "inline";
    if (!useInlineStyles && styleType !== "adopted") {
      console.error("You must define styleType to be either 'inline' or 'adopted'");
      return;
    }

    if (!this.shadowRoot) {
      this.attachShadow({mode: 'open'});
      this.shadowRoot.append(Carousel.createShadowContent());
    }
```

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/issues/831#issuecomment-597416743