diff --git a/aio/src/app/custom-elements/code/code-tabs.component.ts b/aio/src/app/custom-elements/code/code-tabs.component.ts index ec0e7ff2517..48d0d947e3d 100644 --- a/aio/src/app/custom-elements/code/code-tabs.component.ts +++ b/aio/src/app/custom-elements/code/code-tabs.component.ts @@ -59,16 +59,12 @@ export class CodeTabsComponent implements OnInit, AfterViewInit { const contentElem = this.content.nativeElement; const codeExamples = Array.from(contentElem.querySelectorAll('code-pane')); + // Remove DOM nodes that are no longer needed. + contentElem.textContent = ''; + 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 `` nodes captured in `codeExamples` ¯\_(ツ)_/¯ - // Only remove the unnecessary nodes after having captured the `` contents. - contentElem.textContent = ''; } ngAfterViewInit() { diff --git a/aio/src/app/layout/doc-viewer/doc-viewer.component.ts b/aio/src/app/layout/doc-viewer/doc-viewer.component.ts index 9a805f7608a..2adff61ff75 100644 --- a/aio/src/app/layout/doc-viewer/doc-viewer.component.ts +++ b/aio/src/app/layout/doc-viewer/doc-viewer.component.ts @@ -103,10 +103,9 @@ export class DocViewerComponent implements OnDestroy { const toc = document.createElement('aio-toc'); toc.className = 'embedded'; titleEl.parentNode.insertBefore(toc, titleEl.nextSibling); - } else if (!needsToc && embeddedToc && embeddedToc.parentNode !== null) { + } else if (!needsToc && embeddedToc) { // Remove the embedded Toc if it's there and not needed. - // We cannot use ChildNode.remove() because of IE11 - embeddedToc.parentNode.removeChild(embeddedToc); + embeddedToc.remove(); } return () => { diff --git a/aio/src/app/shared/custom-icon-registry.ts b/aio/src/app/shared/custom-icon-registry.ts index c7cddbaec7c..e0b6fc52637 100644 --- a/aio/src/app/shared/custom-icon-registry.ts +++ b/aio/src/app/shared/custom-icon-registry.ts @@ -13,7 +13,7 @@ import { unwrapHtmlForSink } from 'safevalues'; * the following attributes: * * * `xmlns="http://www.w3.org/2000/svg"` - * * `focusable="false"` (disable IE11 default behavior to make SVGs focusable) + * * `focusable="false"` (the default) * * `height="100%"` (the default) * * `width="100%"` (the default) * * `preserveAspectRatio="xMidYMid meet"` (the default) diff --git a/aio/src/app/shared/toc.service.ts b/aio/src/app/shared/toc.service.ts index e27e637beab..3f787dc303b 100644 --- a/aio/src/app/shared/toc.service.ts +++ b/aio/src/app/shared/toc.service.ts @@ -67,10 +67,10 @@ export class TocService { div.innerHTML = unwrapHtmlForSink(fromInnerHTML(heading)); // Remove any `.github-links` or `.header-link` elements (along with their content). - querySelectorAll(div, '.github-links, .header-link').forEach(removeNode); + div.querySelectorAll('.github-links, .header-link').forEach(link => link.remove()); // Remove any remaining `a` elements (but keep their content). - querySelectorAll(div, 'a').forEach(anchorLink => { + div.querySelectorAll('a').forEach(anchorLink => { // We want to keep the content of this anchor, so move it into its parent. const parent = anchorLink.parentNode as Node; while (anchorLink.childNodes.length) { @@ -78,7 +78,7 @@ export class TocService { } // Now, remove the anchor. - removeNode(anchorLink); + anchorLink.remove(); }); return { @@ -90,11 +90,10 @@ export class TocService { } private findTocHeadings(docElement: Element): HTMLHeadingElement[] { - // const headings = querySelectorAll(docElement, 'h1,h2,h3'); - const headings = querySelectorAll(docElement, 'h1,h2,h3'); + const headings = docElement.querySelectorAll('h1,h2,h3'); const skipNoTocHeadings = (heading: HTMLHeadingElement) => !/(?:no-toc|notoc)/i.test(heading.className); - return headings.filter(skipNoTocHeadings); + return Array.prototype.filter.call(headings, skipNoTocHeadings); } private resetScrollSpyInfo() { @@ -128,27 +127,3 @@ export class TocService { } } } - -// Helpers -function querySelectorAll( - parent: Element, - selector: K -): HTMLElementTagNameMap[K][]; -function querySelectorAll( - parent: Element, - selector: K -): SVGElementTagNameMap[K][]; -function querySelectorAll(parent: Element, selector: string): E[]; -function querySelectorAll(parent: Element, selector: string) { - // Wrap the `NodeList` as a regular `Array` to have access to array methods. - // NOTE: IE11 does not even support some methods of `NodeList`, such as - // [NodeList#forEach()](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach). - return Array.from(parent.querySelectorAll(selector)); -} - -function removeNode(node: Node): void { - if (node.parentNode !== null) { - // We cannot use `Node.remove()` because of IE11. - node.parentNode.removeChild(node); - } -} diff --git a/aio/src/styles/1-layouts/content-layout/_content-layout.scss b/aio/src/styles/1-layouts/content-layout/_content-layout.scss index 42c26eec4e3..1f42497c3ad 100644 --- a/aio/src/styles/1-layouts/content-layout/_content-layout.scss +++ b/aio/src/styles/1-layouts/content-layout/_content-layout.scss @@ -6,8 +6,6 @@ } .sidenav-content { - display: block; // This is required for browsers that do not recognize `
` as a block - // element (such as IE11). min-height: 100vh; padding: 80px 3rem 2rem; max-width: 50em; diff --git a/aio/src/styles/2-modules/code/_code.scss b/aio/src/styles/2-modules/code/_code.scss index 6ec78527c00..a56514c9bd5 100644 --- a/aio/src/styles/2-modules/code/_code.scss +++ b/aio/src/styles/2-modules/code/_code.scss @@ -101,8 +101,6 @@ aio-code { top: -7px; right: -19px; padding: 0; - overflow: visible; // This is required for the button to be displayed correctly in IE11. - background-color: transparent; border: none; cursor: pointer; diff --git a/aio/src/styles/2-modules/features/_features.scss b/aio/src/styles/2-modules/features/_features.scss index 099415c2bfc..67b67072fb6 100644 --- a/aio/src/styles/2-modules/features/_features.scss +++ b/aio/src/styles/2-modules/features/_features.scss @@ -24,8 +24,6 @@ .feature-row { display: flex; flex-wrap: wrap; - justify-content: space-around; // This is required for browsers that do not support - // `space-evenly` (such as IE11). justify-content: space-evenly; @media (max-width: 1057px) { diff --git a/aio/src/testing/dom-utils.ts b/aio/src/testing/dom-utils.ts deleted file mode 100644 index 8e296fe352f..00000000000 --- a/aio/src/testing/dom-utils.ts +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Create a `CustomEvent` (even on browsers where `CustomEvent` is not a constructor). - */ -export function createCustomEvent(doc: Document, name: string, detail: any): CustomEvent { - const bubbles = false; - const cancelable = false; - - // On IE11, `CustomEvent` is not a constructor. - if (typeof CustomEvent !== 'function') { - const event = doc.createEvent('CustomEvent'); - event.initCustomEvent(name, bubbles, cancelable, detail); - return event; - } - - return new CustomEvent(name, {bubbles, cancelable, detail}); -}