Add support for Shadow DOM (ShadowRoot) #101

zm-cttae · 2023-01-10T18:15:17Z

Resolves #86.

zm-cttae · 2023-01-10T18:24:23Z

Possible test case we can comandeer:

./test-lib/mdn-web-components-examples/slotchange.html (source)

<!DOCTYPE html>
<html>
  <!-- Sourced from https://github.com/mdn/web-components-examples/blob/a507099/slotchange/index.html -->
  <head>
    <meta charset="utf-8">
    <title>mdn/web-components-examples/slotchange</title>
    <script defer>
      customElements.define('summary-display',
        class extends HTMLElement {
          constructor() {
            super();
            const template = document.getElementById('summary-display-template');
            const templateContent = template.content;
            const shadowRoot = this.attachShadow({mode: 'open'});
            shadowRoot.appendChild(templateContent.cloneNode(true));
            const items = Array.from(this.querySelectorAll('li'));
            const descriptions = Array.from(this.querySelectorAll('p'));
            items.forEach(function(item) { item.addEventListener('click', clickHandler); })
            items[0].click();
            function clickHandler(event) {
              items.forEach(item => {
                item.style.backgroundColor = 'white';
              });
              descriptions.forEach(description => {
                updateDisplay(description, event.target);
              });
            }
            function updateDisplay(description, item) {
              description.removeAttribute('slot');
              if(description.getAttribute('data-name') === item.textContent) {
                description.setAttribute('slot', 'choice');
                item.style.backgroundColor = '#bad0e4';
              }
            }
          }
        }
      );
    </script>
    <style>
      li {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h1>slotchange event example</h1>

    <summary-display>
      <ul slot="master-list">
        <li>Apples</li>
        <li>Pears</li>
        <li>Bananas</li>
        <li>Oranges</li>
        <li>Peaches</li>
        <li>Strawberries</li>
        <li>Blueberries</li>
      </ul>

      <p data-name="Apples">A common, sweet, crunchy fruit, usually green or yellow in color.</p>
      <p data-name="Pears">A fairly common, sweet, usually green fruit, usually softer than Apples.</p>
      <p data-name="Bananas">A long, curved, yellow fruit, with a fairly gentle flavor.</p>
      <p data-name="Oranges">Orange in color, usually sweet but can be sharp, often contains pips.</p>
      <p data-name="Peaches">An orange fruit with big stone in the middle, and sweet, juicy flesh.</p>
      <p data-name="Strawberries">A red fruit with yellow seeds on the outside; has a sweet flavor and a pretty shape.</p>
      <p data-name="Blueberries">They are berries and they are blue; sweet in flavor, small in size, round.</p>
    </summary-display>

    <template id="summary-display-template">
      <article>
        <div>
          <slot name="master-list"></slot>
        </div>
        <div>
          <slot name="choice"></slot>
        </div>
      </article>
    </template>
  </body>
</html>

src/dom-to-image-more.js

IDisposable · 2023-01-19T02:05:46Z

Hate to do this to you, but probably will land this after the #106... do you have a test we can put in the suite?

Refs: 1904labs#104

zm-cttae · 2023-01-19T17:29:33Z

Added tests, greatly simplified that snippet first too :)

src/dom-to-image-more.js

- Remove extraneous logic to handle ShadowRoot - Abstract `cloneChildren` ternaries awayy

src/dom-to-image-more.js

These tags are (mis?)used without scoping in shadow DOM Remove them to prevent the cloned shadow DOM breaking Also STYLE tags can contribute media queries that damage output integrity

src/dom-to-image-more.js

IDisposable · 2023-01-24T22:18:07Z

This is looking REALLY good, thanks for all your hard work :)
The questions I have outstanding are trivial and you can just say and I'm happy to merge as we are now.

zm-cttae · 2023-01-24T22:22:17Z

IDisposable · 2023-01-25T21:36:33Z

This seems to have failed unit testing

zm-cttae · 2023-01-25T21:37:30Z

Yup must be that margin on <p>

IDisposable · 2023-01-25T21:59:53Z

The whole cloned node section is blank.... creating a fiddle
https://jsfiddle.net/w0efg2y7/6/

IDisposable · 2023-01-25T22:23:09Z

This is the emitted IFRAME from the fiddle
shadow-fiddle.html.txt
(rename back to HTML)

zm-cttae · 2023-01-26T07:45:27Z

I think there must have been a race condition where the <script> kicked in after the test bench ran. It's a custom element that won't render until then

Maybe it works if the <script> tag is inside the element

IDisposable · 2023-01-26T08:06:04Z

I moved the script up to above the content and now we get a warning when running it... but the cloning works. SO WRONG
https://jsfiddle.net/c349vyLs/4/

zm-cttae · 2023-02-02T12:38:14Z

Got it ... the element in the testcase is technically dependent on template also so it needs to go after it.

IDisposable · 2023-02-02T19:53:23Z

... going to have to think through how to delay long enough to make the tests pass... maybe a simple await somewhere.

Add open shadow DOM cloning support (1904labs#86)

bb82420

zm-cttae force-pushed the feat-shadow-dom-support branch from addf823 to bb82420 Compare January 11, 2023 09:53

Revert filtering out shadow DOM <script>s

f662ffa

IDisposable mentioned this pull request Jan 12, 2023

Filter out sandbox iframe from clone tree #102

Closed

IDisposable reviewed Jan 12, 2023

View reviewed changes

src/dom-to-image-more.js Outdated Show resolved Hide resolved

src/dom-to-image-more.js Outdated Show resolved Hide resolved

Merge branch 'master' into feat-shadow-dom-support

a159648

zm-cttae requested a review from IDisposable January 18, 2023 16:13

zm-cttae marked this pull request as ready for review January 18, 2023 16:19

zm-cttae mentioned this pull request Jan 19, 2023

Black image when capturing an iframe of Google Street View #50

Open

1 task

zm-cttae added 2 commits January 19, 2023 15:33

Filter out <script> elements to keep DOM static

a6ce137

Refs: 1904labs#104

Add tests for 1904labs#86

ce8f421

zm-cttae and others added 2 commits January 20, 2023 18:00

Add timeout to 1904labs#86 test

d873939

Merge branch 'master' into feat-shadow-dom-support

df435d3

IDisposable reviewed Jan 21, 2023

View reviewed changes

Finish processClone merge resolve for early conditional return

3c6b9c7

zm-cttae commented Jan 21, 2023

View reviewed changes

src/dom-to-image-more.js Show resolved Hide resolved

zm-cttae added 2 commits January 22, 2023 20:35

Refactor shadow DOM logic

d656297

- Remove extraneous logic to handle ShadowRoot - Abstract `cloneChildren` ternaries awayy

Clean up pass for 1904labs#101

42fb4d0

IDisposable reviewed Jan 24, 2023

View reviewed changes

src/dom-to-image-more.js Outdated Show resolved Hide resolved

zm-cttae added 2 commits January 24, 2023 22:08

Filter out STYLE and LINK tags for 1904labs#101

8061308

These tags are (mis?)used without scoping in shadow DOM Remove them to prevent the cloned shadow DOM breaking Also STYLE tags can contribute media queries that damage output integrity

Cleanup extra newline left in cloneNode

d897dc5

IDisposable reviewed Jan 24, 2023

View reviewed changes

src/dom-to-image-more.js Show resolved Hide resolved

Rename shadowRoot property check for 1904labs#101

2ea80a8

IDisposable approved these changes Jan 24, 2023

View reviewed changes

IDisposable merged commit 437d360 into 1904labs:master Jan 24, 2023

zm-cttae deleted the feat-shadow-dom-support branch January 25, 2023 07:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for Shadow DOM (ShadowRoot) #101

Add support for Shadow DOM (ShadowRoot) #101

zm-cttae commented Jan 10, 2023

zm-cttae commented Jan 10, 2023 •

edited

Loading

IDisposable commented Jan 19, 2023

zm-cttae commented Jan 19, 2023

IDisposable commented Jan 24, 2023

zm-cttae commented Jan 24, 2023

IDisposable commented Jan 25, 2023

zm-cttae commented Jan 25, 2023

IDisposable commented Jan 25, 2023

IDisposable commented Jan 25, 2023

zm-cttae commented Jan 26, 2023

IDisposable commented Jan 26, 2023

zm-cttae commented Feb 2, 2023

IDisposable commented Feb 2, 2023

Add support for Shadow DOM (ShadowRoot) #101

Add support for Shadow DOM (ShadowRoot) #101

Conversation

zm-cttae commented Jan 10, 2023

zm-cttae commented Jan 10, 2023 • edited Loading

IDisposable commented Jan 19, 2023

zm-cttae commented Jan 19, 2023

IDisposable commented Jan 24, 2023

zm-cttae commented Jan 24, 2023

IDisposable commented Jan 25, 2023

zm-cttae commented Jan 25, 2023

IDisposable commented Jan 25, 2023

IDisposable commented Jan 25, 2023

zm-cttae commented Jan 26, 2023

IDisposable commented Jan 26, 2023

zm-cttae commented Feb 2, 2023

IDisposable commented Feb 2, 2023

zm-cttae commented Jan 10, 2023 •

edited

Loading