[Enhancement] Support Cloning Custom Elements

[ShaMan123]

Description

Support custom elements:
Clone a custom element by cloning it's shadow node's children rather than trying to clone it's own.

Motivation and Context

#128
Inspired by: tsayen/dom-to-image#370

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Enhancement (changes that improvement of current feature or performance)
• Refactoring (changes that neither fixes a bug nor adds a feature)
• Test Case (changes that add missing tests or correct existing tests)
• Code style optimization (changes that do not affect the meaning of the code)
• Docs (changes that only update documentation)
• Chore (changes that don't modify src or test files)

Self Check before Merge

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[accesslint]

There are accessibility issues in these changes.

[vivcat]

|
👋 @ShaMan123

💖 Thanks for opening this pull request! 💖

Please follow the contributing guidelines. And we use semantic commit messages to streamline the release process.

Examples of commit messages with semantic prefixes:

• fix: don't overwrite prevent_default if default wasn't prevented
• feat: add graph.scale() method
• docs: graph.getShortestPath is now available

Things that will help get your PR across the finish line:

• Follow the TypeScript coding style.
• Run npm run lint locally to catch formatting errors earlier.
• Document any user-facing changes you've made.
• Include tests when adding/changing behavior.
• Include screenshots and animated GIFs whenever possible.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

[ShaMan123]

$ rimraf ./test/coverage
$ karma start
14 05 2021 22:51:59.774:INFO [compiler.karma-typescript]: Compiling project using Typescript 4.0.3
14 05 2021 22:52:04.811:INFO [compiler.karma-typescript]: Compiled 13 files in 4854 ms.
Since Acorn 8.0.0, options.ecmaVersion is required.
Defaulting to 2020, but this will stop working in the future.
14 05 2021 22:52:05.534:INFO [bundler.karma-typescript]: Bundled imports for 12 file(s) in 217 ms.
14 05 2021 22:52:08.487:INFO [karma-server]: Karma v5.2.3 server started at http://localhost:9876/
14 05 2021 22:52:08.489:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
14 05 2021 22:52:08.504:INFO [launcher]: Starting browser Chrome
14 05 2021 22:52:09.643:INFO [Chrome 90.0.4430.212 (Windows 10)]: Connected on socket B9QoY__gkEXINHHvAAAA with id 20104069

  html to image
    basic usage
      √ should render to svg
      √ should render to png
      √ should render to blob
      √ should render to jpeg
      √ should use quality parameter when rendering to jpeg
      √ should convert an element to an array of pixels
      √ should handle border
      √ should render bigger node
      √ should handle "#" in colors and attributes
      √ should render whole node when its scrolled
      √ should render text nodes
      √ should preserve content of ::before and ::after pseudo elements
      √ should render with external stylesheet
      √ should render web fonts
      √ should render images
      √ should render background images
      √ should render user input from <input>
      √ should render user input from <textarea>
      √ should render content from <canvas>
LOG LOG: 'Error inlining remote css file', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
Chrome 90.0.4430.212 (Windows 10) LOG: 'Error inlining remote css file', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
LOG LOG: 'Error loading remote stylesheet', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
Chrome 90.0.4430.212 (Windows 10) LOG: 'Error loading remote stylesheet', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
LOG LOG: 'Error while reading CSS rules from https://unpkg.com/mathlive/dist/mathlive-fonts.css', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
Chrome 90.0.4430.212 (Windows 10) LOG: 'Error while reading CSS rules from https://unpkg.com/mathlive/dist/mathlive-fonts.css', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
      custom element
        √ should render content from shadow node of custom element
    work with svg
      - should render nested svg with broken namespace
      √ should render svg `<rect>` with width and heigth
      √ should render svg `<rect>` with applied css styles
    work with options
      √ should apply width and height options to node copy being rendered
      √ should render backgroundColor
      √ should render backgroundColor in SVG
      √ should apply style text to node copy being rendered
      √ should combine dimensions and style
      √ should use node filter
      √ should not apply node filter to root node
      √ should only use fontEmbedCss if it is supplied
ERROR LOG: 'Failed to fetch resource: http://fonts.com/font1.woff2'
Chrome 90.0.4430.212 (Windows 10) ERROR: 'Failed to fetch resource: http://fonts.com/font1.woff2'
      √ should embed only the preferred font
LOG LOG: 'Error inlining remote css file', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
Chrome 90.0.4430.212 (Windows 10) LOG: 'Error inlining remote css file', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
LOG LOG: 'Error loading remote stylesheet', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
Chrome 90.0.4430.212 (Windows 10) LOG: 'Error loading remote stylesheet', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
LOG LOG: 'Error while reading CSS rules from http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
Chrome 90.0.4430.212 (Windows 10) LOG: 'Error while reading CSS rules from http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600', 'SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules'
    special cases
      √ should not crash when loading external stylesheet causes error
    util
      parseURLs
        √ should parse urls
        √ should ignore data urls
      embed
        √ should embed url
        √ should resolve urls if base url given

Chrome 90.0.4430.212 (Windows 10): Executed 36 of 37 (skipped 1) SUCCESS (20.871 secs / 20.2 secs)
TOTAL: 36 SUCCESS


=============================== Coverage summary ===============================
Statements   : 89.85% ( 726/808 )
Branches     : 70.25% ( 170/242 )
Functions    : 93.79% ( 272/290 )
Lines        : 89.56% ( 695/776 )
================================================================================
Done in 33.17s.

[vivcat]

👋 @ShaMan123 Congrats on merging your first pull request! 🎉🎉🎉

[vivcat]

🎉 This PR is included in version 1.6.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release