Ionic+AnglerJSでhtml2canvasでキャプチャできない【未解決】

#Ionic+AnglerJSでhtml2canvasでキャプチャできない

新しめのIonicではエラーがでてキャプチャできなかったメモ
あと、エラーがでるので、それもメモ

##開発環境

Ionicでinitしたまま使っているので新しめ

```
ionic -v
5.2.5
```

```
  "dependencies": {
    "@angular/common": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.7.1",
    "core-js": "^2.5.4",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.801.2",
    "@angular-devkit/build-angular": "~0.801.2",
    "@angular-devkit/core": "~8.1.2",
    "@angular-devkit/schematics": "~8.1.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@ionic/angular-toolkit": "~2.0.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
```

##動作はできたけど。。。

###タグ外に配置では動作

ionicのタグ外に配置すると動作しました。。

![NoName_2019-9-12_15-29-45_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/2c17027a-eacd-ccfd-65c7-712cd2ae40cd.png)

###原因っぽい？

下記の前に移動したらキャプチャできたので、これが原因っぽい？

```
#shadow-root(opne)
```

![NoName_2019-9-12_15-58-46_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/6c557e42-1ddc-a8e7-3994-e4764bab97b8.png)


###でてくるエラー

```
core-5ba38749.js:58 DOMException: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed
    at addStyle (http://127.0.0.1:8100/vendor.js:104892:51)
    at attachStyles (http://127.0.0.1:8100/vendor.js:104901:21)
    at updateComponent (http://127.0.0.1:8100/vendor.js:105728:9)
    at Array.update (http://127.0.0.1:8100/vendor.js:105695:26)
    at consumeTimeout (http://127.0.0.1:8100/vendor.js:104680:23)
    at flush (http://127.0.0.1:8100/vendor.js:104703:5)
    at ZoneDelegate.invoke (http://127.0.0.1:8100/polyfills.js:3365:26)
    at Zone.run (http://127.0.0.1:8100/polyfills.js:3130:43)
    at http://127.0.0.1:8100/polyfills.js:3861:36
    at ZoneDelegate.invokeTask (http://127.0.0.1:8100/polyfills.js:3397:31)
```

##ソース

index.htmlに直接書き込みで動作検証

src/app/index.html

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Ionic App</title>
  <base href="/" />
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />
  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
  add to homescreen for ios
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
  <app-root></app-root>
  <div id="capture__" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
  </div>
</body>
<script src="https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-rc.3/html2canvas.min.js"></script>
<script>
  function capture() {
    console.log('capture')
    html2canvas(document.querySelector('#capture__')).then(canvas => {
      document.body.appendChild(canvas)
    })
  }
</script>
</html>
```


##参考サイト
- html2canvas<br>https://html2canvas.hertzen.com/
- niklasvh/html2canvas<br>https://github.com/niklasvh/html2canvas
- [ionic-v4] shadow-dom<br>https://forum.ionicframework.com/t/ionic-v4-shadow-dom/137350/2