` in shadow DOM seems to lose the LFs in some browsers\n doc!.body.appendChild(code);\n const range = doc!.createRange();\n range.selectNodeContents(code);\n selection!.addRange(range);\n doc!.execCommand('copy');\n this._handleCopyButtonFeedbackTooltip(this.copyButtonFeedbackTimeout);\n doc!.body.removeChild(code);\n selection!.removeAllRanges();\n }\n\n /**\n * Handles showing/hiding the feedback tooltip.\n */\n private _handleCopyButtonFeedbackTooltip = createHandleCopyButtonFeedbackTooltip(\n ({ showFeedback = false }: { showFeedback?: boolean }) => {\n this._showCopyButtonFeedback = showFeedback;\n this.requestUpdate();\n }\n );\n\n /**\n * Handles `click` event on the expando.\n */\n private _handleClickExpando() {\n this._expanded = !this._expanded;\n this.requestUpdate();\n }\n\n /**\n * Handles change in slot content to determine if the content\n */\n private _handleSlotChange() {\n const { type, _preNode: preNode } = this;\n if (type === CODE_SNIPPET_TYPE.MULTI) {\n if (preNode.getBoundingClientRect().height > 255) {\n this._showExpando = true;\n this.requestUpdate();\n }\n }\n }\n\n /**\n * The `` element in the shadow DOM.\n */\n @query('pre')\n private _preNode!: HTMLPreElement;\n\n /**\n * An assistive text for screen reader to advice a DOM node is for code snippet.\n */\n @property({ attribute: 'code-assistive-text' })\n codeAssistiveText = 'code-snippet';\n\n /**\n * The context content for the collapse button.\n */\n @property({ attribute: 'collapse-button-text' })\n collapseButtonText = 'Show less';\n\n /**\n * The color scheme.\n */\n @property({ attribute: 'color-scheme', reflect: true })\n colorScheme = CODE_SNIPPET_COLOR_SCHEME.REGULAR;\n\n /**\n * An assistive text for screen reader to announce, telling that the button copies the content to the clipboard.\n */\n @property({ attribute: 'copy-button-assistive-text' })\n copyButtonAssistiveText = 'Copy to clipboard';\n\n /**\n * The feedback text for the copy button.\n */\n @property({ attribute: 'copy-button-feedback-text' })\n copyButtonFeedbackText = 'Copied!';\n\n /**\n * The number in milliseconds to determine how long the tooltip for the copy button should remain.\n */\n @property({ type: Number, attribute: 'copy-button-feedback-timeout' })\n copyButtonFeedbackTimeout = 2000;\n\n /**\n * The context content for the expand button.\n */\n @property({ attribute: 'expand-button-text' })\n expandButtonText = 'Show more';\n\n /**\n * The type of code snippet.\n */\n @property({ reflect: true })\n type = CODE_SNIPPET_TYPE.SINGLE;\n\n createRenderRoot() {\n return this.attachShadow({\n mode: 'open',\n delegatesFocus: Number((/Safari\\/(\\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <= 537,\n });\n }\n\n render() {\n const {\n codeAssistiveText,\n collapseButtonText,\n copyButtonAssistiveText,\n copyButtonFeedbackText,\n expandButtonText,\n type,\n _expanded: expanded,\n _showCopyButtonFeedback: showCopyButtonFeedback,\n _showExpando: showExpando,\n _handleClickCopyButton: handleClickCopyButton,\n _handleClickExpando: handleClickExpando,\n _handleSlotChange: handleSlotChange,\n } = this;\n\n if (type === CODE_SNIPPET_TYPE.SINGLE) {\n // Ensures no extra whitespace text node\n // prettier-ignore\n return html`\n ${renderCode({\n assistiveText: codeAssistiveText,\n expanded,\n children: html``,\n })}\n ${renderCopyButton({\n assistiveText: copyButtonAssistiveText,\n feedbackText: copyButtonFeedbackText,\n showFeedback: showCopyButtonFeedback,\n handleClickButton: handleClickCopyButton,\n className: `${prefix}--snippet-button`,\n })}\n `;\n }\n\n if (type === CODE_SNIPPET_TYPE.MULTI) {\n // Ensures no extra whitespace text node\n // prettier-ignore\n return html`\n ${renderCode({\n assistiveText: codeAssistiveText,\n expanded,\n children: html``,\n })}\n ${renderCopyButton({\n assistiveText: copyButtonAssistiveText,\n feedbackText: copyButtonFeedbackText,\n showFeedback: showCopyButtonFeedback,\n handleClickButton: handleClickCopyButton,\n className: `${prefix}--snippet-button`,\n })}\n ${!showExpando\n ? undefined\n : renderExpando({\n children: expanded\n ? html`${collapseButtonText}`\n : html`${expandButtonText}`,\n handleClick: handleClickExpando,\n })}\n `;\n }\n\n // Ensures no extra whitespace text node\n // prettier-ignore\n return html`\n ${renderCopyButton({\n assistiveText: copyButtonAssistiveText,\n feedbackText: copyButtonFeedbackText,\n showFeedback: showCopyButtonFeedback,\n handleClickButton: handleClickCopyButton,\n className: `${prefix}--snippet ${prefix}--snippet--inline`,\n children: html`