iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(docs-infra): fix `<code-tabs>` in IE11 (#41183) 

Previously, `<code-tabs>` did not work correctly in IE11. More
specifically, due to how IE11 handles updates to `innerHTML`, the
contents of `<code-pane>` elements were cleared before we could capture
them and pass them to the `<aio-code>` components.

This commit fixes it by ensuring we capture the `<code-pane>` contents
before clearing unneeded HTML.

Before: ![code tabs in IE11 before][1]
After: ![code tabs in IE11 after][2]

[1]: https://user-images.githubusercontent.com/8604205/110815248-f4460e00-8292-11eb-868e-eca7ba5e9cd3.png
[2]: https://user-images.githubusercontent.com/8604205/110815253-f5773b00-8292-11eb-80a6-1a0b1ea44d8f.png

PR Close #41183
This commit is contained in:
George Kalpakas 2021-03-11 17:56:38 +02:00 committed by Jessica Janiuk
parent ea00e2c0b4
commit 8d457ab2e1
1 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
aio/src/app/custom-elements/code/code-tabs.component.ts
View File

@ -57,11 +57,17 @@ export class CodeTabsComponent implements OnInit, AfterViewInit {
this.tabs = [];
const contentElem = this.content.nativeElement;
const codeExamples = Array.from(contentElem.querySelectorAll('code-pane'));
contentElem.innerHTML = ''; // Remove DOM nodes that are no longer needed.
for (const tabContent of codeExamples) {
this.tabs.push(this.getTabInfo(tabContent));
}
// Remove DOM nodes that are no longer needed.
//
// NOTE:
// In IE11, doing this also empties the `<code-pane>` nodes captured in `codeExamples` ¯\_(ツ)_/¯
// Only remove the unnecessary nodes after having captured the `<code-pane>` contents.
contentElem.innerHTML = '';
}
ngAfterViewInit() {