CINXE.COM
Fancy tabs web component - shadow dom v1, custom elements v1, full a11y · GitHub
<!DOCTYPE html> <html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark" data-a11y-animated-images="system" data-a11y-link-underlines="true" > <head> <meta charset="utf-8"> <link rel="dns-prefetch" href="https://github.githubassets.com"> <link rel="dns-prefetch" href="https://avatars.githubusercontent.com"> <link rel="dns-prefetch" href="https://github-cloud.s3.amazonaws.com"> <link rel="dns-prefetch" href="https://user-images.githubusercontent.com/"> <link rel="preconnect" href="https://github.githubassets.com" crossorigin> <link rel="preconnect" href="https://avatars.githubusercontent.com"> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/light-3e154969b9f9.css" /><link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/dark-9c5b7a476542.css" /><link data-color-theme="dark_dimmed" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_dimmed-afda8eb0fb33.css" /><link data-color-theme="dark_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_high_contrast-2494e44ccdc5.css" /><link data-color-theme="dark_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_colorblind-56fff47acadc.css" /><link data-color-theme="light_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_colorblind-71cd4cc132ec.css" /><link data-color-theme="light_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_high_contrast-fd5499848985.css" /><link data-color-theme="light_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_tritanopia-31d17ba3e139.css" /><link data-color-theme="dark_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_tritanopia-68d6b2c79663.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-primitives-4cf0d59ab51a.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-af846850481e.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/global-8b10f05a77e6.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/github-d3b66f11d613.css" /> <script type="application/json" id="client-env">{"locale":"en","featureFlags":["copilot_new_references_ui","copilot_beta_features_opt_in","copilot_chat_static_thread_suggestions","copilot_conversational_ux_history_refs","copilot_implicit_context","copilot_smell_icebreaker_ux","experimentation_azure_variant_endpoint","failbot_handle_non_errors","geojson_azure_maps","ghost_pilot_confidence_truncation_25","ghost_pilot_confidence_truncation_40","hovercard_accessibility","issues_react_new_timeline","issues_react_avatar_refactor","issues_react_remove_placeholders","issues_react_blur_item_picker_on_close","marketing_pages_search_explore_provider","react_keyboard_shortcuts_dialog","remove_child_patch","sample_network_conn_type","site_metered_billing_update","issues_react_first_time_contribution_banner","ui_commands_respect_modals","lifecycle_label_name_updates"]}</script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/wp-runtime-0c166a63ca9a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_dompurify_dist_purify_js-b73fdff77a4e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover_js-aff936e590ed.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_arianotify-polyfill_ariaNotify-polyfill_js-node_modules_github_mi-247092-740e4ddd559d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_failbot_failbot_ts-93b6a0551aa9.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/environment-cd35650c2e9c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_primer_behaviors_dist_esm_index_mjs-4aa4b0e95669.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_selector-observer_dist_index_esm_js-f690fd9ae3d5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_relative-time-element_dist_index_js-6d3967acd51c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_combobox-nav_dist_index_js-node_modules_github_g-emoji-element_di-6ce195-53781cbc550f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_auto-complete-element_dist_index_js-node_modules_github_catalyst_-6afc16-3cdfa69a0406.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_text-expander-element_dist_index_js-f5498b8d4e5d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_filter-input-element_dist_index_js-node_modules_github_remote-inp-b5f1d7-492b5042c841.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_stacktrace-parser_dist_s-1f651a-1e3d784c897c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_file-attachment-element_dist_index_js-node_modules_primer_view-co-7671f1-dc6cac136d88.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/github-elements-71486356f507.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/element-registry-e3ab8405ef80.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_braintree_browser-detection_dist_browser-detection_js-node_modules_githu-bb80ec-634de60bacfa.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_lit-html_lit-html_js-ce7225a304c5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_hydro-analytics-client_dist_analytics-client_js-node_modules_gith-f3aee1-e6893db9c19e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_morphdom_dist_morphdom-e-7c534c-f8a5485c982a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_turbo_dist_turbo_es2017-esm_js-858e043fcf76.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_remote-form_dist_index_js-node_modules_delegated-events_dist_inde-893f9f-6cf3320416b8.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_scroll-anchoring_dist_scroll-anchoring_esm_js-node_modules_stacktrace-pa-a71630-6f3c4f0189d8.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_color-convert_index_js-0e07cc183eed.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_quote-selection_dist_index_js-node_modules_github_session-resume_-0b5e12-889cec8cf448.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_updatable-content_updatable-content_ts-eae9df0dd562.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_task-list_ts-app_assets_modules_github_sso_ts-ui_packages-900dde-18d1c91a7872.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_sticky-scroll-into-view_ts-7cbef09a422c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_ajax-error_ts-app_assets_modules_github_behaviors_include-d0d0a6-0e9fa537dc4f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_commenting_edit_ts-app_assets_modules_github_behaviors_ht-83c235-c89801ebbe15.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/behaviors-a6e4c4c86bfa.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_delegated-events_dist_index_js-node_modules_github_catalyst_lib_index_js-f6223d90c7ba.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/notifications-global-3366f6b6298e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_delegated-events_dist_index_js-node_modules_github_hotkey_dist_index_js-d92e69b3521a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_github_remote-form_dist_-e6e00d-5e6fcc2d213d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_form-utils_form-utils_ts-ui_packages_input-navigation-behavior_input-navigation-b-a97423-97468312ad00.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_diffs_blob-lines_ts-app_assets_modules_github_diffs_linkable-line-n-b8c0ea-77a5219efe36.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/gist-0633f0ca324a.js"></script> <title>Fancy tabs web component - shadow dom v1, custom elements v1, full a11y · GitHub</title> <meta name="route-pattern" content="/:user_id/:gist_id(.:format)" data-turbo-transient> <meta name="route-controller" content="gists_gists" data-turbo-transient> <meta name="route-action" content="show" data-turbo-transient> <meta name="current-catalog-service-hash" content="56253a530ab9027b25719525dcbe6007461a3202218f6f5dfce5a601c121cbcb"> <meta name="request-id" content="CE28:2291B9:7DF8EF:8E6298:6746CF8A" data-pjax-transient="true"/><meta name="html-safe-nonce" content="f7f2b16b30aecc098b21c57432218c513fca92acec724f4c381248f05f7e81a9" data-pjax-transient="true"/><meta name="visitor-payload" content="eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJDRTI4OjIyOTFCOTo3REY4RUY6OEU2Mjk4OjY3NDZDRjhBIiwidmlzaXRvcl9pZCI6IjUwNjkyODMwNTQzMzA0OTg5NTQiLCJyZWdpb25fZWRnZSI6InNvdXRoZWFzdGFzaWEiLCJyZWdpb25fcmVuZGVyIjoic291dGhlYXN0YXNpYSJ9" data-pjax-transient="true"/><meta name="visitor-hmac" content="9798990cb2385722431085b722fa7522845e1844fc8018467ce5d31750e973e5" data-pjax-transient="true"/> <meta name="github-keyboard-shortcuts" content="copilot" data-turbo-transient="true" /> <meta name="selected-link" value="gist_code" data-turbo-transient> <link rel="assets" href="https://github.githubassets.com/"> <meta name="google-site-verification" content="Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I"> <meta name="octolytics-url" content="https://collector.github.com/github/collect" /> <meta name="analytics-location" content="/<user-name>/<gist-id>" data-turbo-transient="true" /> <meta name="user-login" content=""> <meta name="viewport" content="width=device-width"> <meta name="description" content="Fancy tabs web component - shadow dom v1, custom elements v1, full a11y - fancy-tabs-demo.html"> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch-gist.xml" title="Gist"> <link rel="fluid-icon" href="https://gist.github.com/fluidicon.png" title="GitHub"> <meta property="fb:app_id" content="1401488693436528"> <meta name="apple-itunes-app" content="app-id=1477376905, app-argument=https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b" /> <meta name="twitter:image" content="https://github.githubassets.com/assets/gist-og-image-54fd7dc0713e.png" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="Fancy tabs web component - shadow dom v1, custom elements v1, full a11y" /><meta name="twitter:description" content="Fancy tabs web component - shadow dom v1, custom elements v1, full a11y - fancy-tabs-demo.html" /> <meta property="og:image" content="https://github.githubassets.com/assets/gist-og-image-54fd7dc0713e.png" /><meta property="og:image:alt" content="Fancy tabs web component - shadow dom v1, custom elements v1, full a11y - fancy-tabs-demo.html" /><meta property="og:site_name" content="Gist" /><meta property="og:type" content="article" /><meta property="og:title" content="Fancy tabs web component - shadow dom v1, custom elements v1, full a11y" /><meta property="og:url" content="https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b" /><meta property="og:description" content="Fancy tabs web component - shadow dom v1, custom elements v1, full a11y - fancy-tabs-demo.html" /><meta property="article:author" content="262588213843476" /><meta property="article:publisher" content="262588213843476" /> <meta name="hostname" content="gist.github.com"> <meta name="expected-hostname" content="gist.github.com"> <meta http-equiv="x-pjax-version" content="cc7767a0c18d7e936a37ec4b8ef829934f464822634943ba0cbdcb5e25e14f1d" data-turbo-track="reload"> <meta http-equiv="x-pjax-csp-version" content="ace39c3b6632770952207593607e6e0be0db363435a8b877b1f96abe6430f345" data-turbo-track="reload"> <meta http-equiv="x-pjax-css-version" content="15b18460ccb38585911f0182c65a829cc58635f60a4a305813e3a2bc7ff7d158" data-turbo-track="reload"> <meta http-equiv="x-pjax-js-version" content="b683bfe8ba503fb752a8a7e87a8162efe7eaf74732202ad69805baa0fa057db8" data-turbo-track="reload"> <meta name="turbo-cache-control" content="no-preview" data-turbo-transient=""> <link href="/ebidel.atom" rel="alternate" title="atom" type="application/atom+xml"> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/gist-622547bb175b.css" /> <meta name="turbo-body-classes" content="logged-out env-production page-responsive"> <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats"> <meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors"> <link rel="mask-icon" href="https://github.githubassets.com/assets/pinned-octocat-093da3e6fa40.svg" color="#000000"> <link rel="alternate icon" class="js-site-favicon" type="image/png" href="https://github.githubassets.com/favicons/favicon.png"> <link rel="icon" class="js-site-favicon" type="image/svg+xml" href="https://github.githubassets.com/favicons/favicon.svg" data-base-href="https://github.githubassets.com/favicons/favicon"> <meta name="theme-color" content="#1e2327"> <meta name="color-scheme" content="light dark" /> </head> <body class="logged-out env-production page-responsive" style="word-wrap: break-word;"> <div data-turbo-body class="logged-out env-production page-responsive" style="word-wrap: break-word;"> <div class="position-relative header-wrapper js-header-wrapper "> <a href="#start-of-content" data-skip-target-assigned="false" class="px-2 py-4 color-bg-accent-emphasis color-fg-on-emphasis show-on-focus js-skip-to-content">Skip to content</a> <span data-view-component="true" class="progress-pjax-loader Progress position-fixed width-full"> <span style="width: 0%;" data-view-component="true" class="Progress-item progress-pjax-loader-bar left-0 top-0 color-bg-accent-emphasis"></span> </span> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/primer-react-765944243383.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-core-cd0a67881543.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-lib-7b7b5264f6c1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/octicons-react-45c3a19dd792.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_tanstack_query-core_build_modern_queryClient_js-e40bb86d3e93.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_emotion_is-prop-valid_dist_emotion-is-prop-valid_esm_js-node_modules_emo-37e3d5-31653d7f2342.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_stacktrace-parser_dist_s-e7dcdd-285fc29e9fa5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover-fn_js-4896ddd4b7bb.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/keyboard-shortcuts-dialog-78b8b9792a5f.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.9fa170e9435ed4b922b9.module.css" /> <react-partial partial-name="keyboard-shortcuts-dialog" data-ssr="false" data-attempted-ssr="false" > <script type="application/json" data-target="react-partial.embeddedData">{"props":{"docsUrl":"https://docs.github.com/get-started/accessibility/keyboard-shortcuts"}}</script> <div data-target="react-partial.reactRoot"></div> </react-partial> <div class="Header js-details-container Details flex-wrap flex-md-nowrap p-responsive" role="banner" > <div class="Header-item d-none d-md-flex"> <a class="Header-link" data-hotkey="g d" aria-label="Gist Homepage " href="/"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-mark-github v-align-middle d-inline-block d-md-none"> <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path> </svg> <svg aria-hidden="true" height="24" viewBox="0 0 68 24" version="1.1" width="68" data-view-component="true" class="octicon octicon-logo-github v-align-middle d-none d-md-inline-block"> <path d="M27.8 17.908h-.03c.013 0 .022.014.035.017l.01-.002-.016-.015Zm.005.017c-.14.001-.49.073-.861.073-1.17 0-1.575-.536-1.575-1.234v-4.652h2.385c.135 0 .24-.12.24-.283V9.302c0-.133-.12-.252-.24-.252H25.37V5.913c0-.119-.075-.193-.21-.193h-3.24c-.136 0-.21.074-.21.193V9.14s-1.636.401-1.741.416a.255.255 0 0 0-.195.253v2.021c0 .164.12.282.255.282h1.665v4.876c0 3.627 2.55 3.998 4.29 3.998.796 0 1.756-.252 1.906-.327.09-.03.135-.134.135-.238v-2.23a.264.264 0 0 0-.219-.265Zm35.549-3.272c0-2.69-1.095-3.047-2.25-2.928-.9.06-1.62.505-1.62.505v5.232s.735.506 1.83.536c1.545.044 2.04-.506 2.04-3.345ZM67 14.415c0 5.099-1.665 6.555-4.576 6.555-2.46 0-3.78-1.233-3.78-1.233s-.06.683-.135.773c-.045.089-.12.118-.21.118h-2.22c-.15 0-.286-.119-.286-.252l.03-16.514a.26.26 0 0 1 .255-.252h3.196a.26.26 0 0 1 .255.252v5.604s1.23-.788 3.03-.788l-.015-.03c1.8 0 4.456.67 4.456 5.767ZM53.918 9.05h-3.15c-.165 0-.255.119-.255.282v8.086s-.826.58-1.95.58c-1.126 0-1.456-.506-1.456-1.62v-7.06a.262.262 0 0 0-.255-.254h-3.21a.262.262 0 0 0-.256.253v7.596c0 3.27 1.846 4.087 4.381 4.087 2.085 0 3.78-1.145 3.78-1.145s.076.58.12.67c.03.074.136.133.24.133h2.011a.243.243 0 0 0 .255-.253l.03-11.103c0-.133-.12-.252-.285-.252Zm-35.556-.015h-3.195c-.135 0-.255.134-.255.297v10.91c0 .297.195.401.45.401h2.88c.3 0 .375-.134.375-.401V9.287a.262.262 0 0 0-.255-.252ZM16.787 4.01c-1.155 0-2.07.907-2.07 2.051 0 1.145.915 2.051 2.07 2.051a2.04 2.04 0 0 0 2.04-2.05 2.04 2.04 0 0 0-2.04-2.052Zm24.74-.372H38.36a.262.262 0 0 0-.255.253v6.08H33.14v-6.08a.262.262 0 0 0-.255-.253h-3.196a.262.262 0 0 0-.255.253v16.514c0 .133.135.252.255.252h3.196a.262.262 0 0 0 .255-.253v-7.06h4.966l-.03 7.06c0 .134.12.253.255.253h3.195a.262.262 0 0 0 .255-.253V3.892a.262.262 0 0 0-.255-.253Zm-28.31 7.313v8.532c0 .06-.015.163-.09.193 0 0-1.875 1.323-4.966 1.323C4.426 21 0 19.84 0 12.2S3.87 2.986 7.651 3c3.27 0 4.59.728 4.8.862.06.075.09.134.09.208l-.63 2.646c0 .134-.134.297-.3.253-.54-.164-1.35-.49-3.255-.49-2.205 0-4.575.623-4.575 5.543s2.25 5.5 3.87 5.5c1.38 0 1.875-.164 1.875-.164V13.94H7.321c-.165 0-.285-.12-.285-.253v-2.735c0-.134.12-.252.285-.252h5.61c.166 0 .286.118.286.252Z"></path> </svg> <svg aria-hidden="true" height="24" viewBox="0 0 38 24" version="1.1" width="38" data-view-component="true" class="octicon octicon-logo-gist v-align-middle d-none d-md-inline-block"> <path d="M7.05 13.095v-1.5h5.28v8.535c-1.17.555-2.925.96-5.385.96C1.665 21.09 0 17.055 0 12.045S1.695 3 6.945 3c2.43 0 3.96.495 4.92.99v1.575c-1.83-.75-3-1.095-4.92-1.095-3.855 0-5.22 3.315-5.22 7.59s1.365 7.575 5.205 7.575c1.335 0 2.97-.105 3.795-.51v-6.03H7.05Zm16.47 1.035h.045c3.33.3 4.125 1.425 4.125 3.345 0 1.815-1.14 3.615-4.71 3.615-1.125 0-2.745-.285-3.495-.585v-1.41c.705.255 1.83.54 3.495.54 2.43 0 3.09-1.035 3.09-2.13 0-1.065-.33-1.815-2.655-2.01-3.39-.3-4.095-1.5-4.095-3.12 0-1.665 1.08-3.465 4.38-3.465 1.095 0 2.34.135 3.375.585v1.41c-.915-.3-1.83-.54-3.405-.54-2.325 0-2.82.855-2.82 2.01 0 1.035.42 1.56 2.67 1.755Zm12.87-4.995v1.275h-3.63v7.305c0 1.425.795 2.01 2.25 2.01.3 0 .63 0 .915-.045v1.335c-.255.045-.75.075-1.035.075-1.965 0-3.75-.9-3.75-3.195v-7.5H28.8v-.72l2.34-.66V5.85l1.62-.465v3.75h3.63ZM16.635 9.09v9.615c0 .81.285 1.05 1.005 1.05v1.335c-1.71 0-2.58-.705-2.58-2.58V9.09h1.575Zm.375-3.495c0 .66-.51 1.17-1.17 1.17a1.14 1.14 0 0 1-1.155-1.17c0-.66.48-1.17 1.155-1.17s1.17.51 1.17 1.17Z"></path> </svg> </a> </div> <div class="Header-item d-md-none"> <button aria-label="Toggle navigation" aria-expanded="false" type="button" data-view-component="true" class="Header-link js-details-target btn-link"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-three-bars"> <path d="M3.75 5.25a.75.75 0 0 0 0 1.5h16.5a.75.75 0 0 0 0-1.5H3.75Zm0 6a.75.75 0 0 0 0 1.5h16.5a.75.75 0 0 0 0-1.5H3.75Zm0 6a.75.75 0 0 0 0 1.5h16.5a.75.75 0 0 0 0-1.5H3.75Z"></path> </svg> </button> </div> <div class="Header-item Header-item--full js-site-search flex-column flex-md-row width-full flex-order-2 flex-md-order-none mr-0 mr-md-3 mt-3 mt-md-0 Details-content--hidden-not-important d-md-flex"> <div class="header-search flex-self-stretch flex-md-self-auto mr-0 mr-md-3 mb-3 mb-md-0"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="position-relative js-quicksearch-form" role="search" aria-label="Site" data-turbo="false" action="/search" accept-charset="UTF-8" method="get"> <div class="header-search-wrapper form-control input-sm js-chromeless-input-container"> <input type="text" class="form-control input-sm js-site-search-focus header-search-input" data-hotkey="s,/" name="q" aria-label="Search" placeholder="Search…" autocorrect="off" autocomplete="off" autocapitalize="off"> </div> </form></div> <nav aria-label="Global" class="d-flex flex-column flex-md-row flex-self-stretch flex-md-self-auto"> <a class="Header-link mr-0 mr-md-3 py-2 py-md-0 border-top border-md-top-0 border-white-fade" data-ga-click="Header, go to all gists, text:all gists" href="/discover">All gists</a> <a class="Header-link mr-0 mr-md-3 py-2 py-md-0 border-top border-md-top-0 border-white-fade" data-ga-click="Header, go to GitHub, text:Back to GitHub" href="https://github.com">Back to GitHub</a> <a class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-0 border-top border-md-top-0 border-white-fade" data-ga-click="Header, sign in" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"gist header","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b","user_id":null}}" data-hydro-click-hmac="3499192e5fd20abba45de8e5eae5e7a83c4c5bf3b7e65cbb82159ffc2518b295" href="https://gist.github.com/auth/github?return_to=https%3A%2F%2Fgist.github.com%2Febidel%2F2d2bb0cdec3f2a16cf519dbaa791ce1b"> Sign in </a> <a class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-0 border-top border-md-top-0 border-white-fade" data-ga-click="Header, sign up" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"gist header","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b","user_id":null}}" data-hydro-click-hmac="0f6552d20c7e8789f6387e129513931df5d184887fe1e705ab8d0c3f59e6dc7e" href="/join?return_to=https%3A%2F%2Fgist.github.com%2Febidel%2F2d2bb0cdec3f2a16cf519dbaa791ce1b&source=header-gist"> Sign up </a></nav> </div> <div class="Header-item Header-item--full flex-justify-center d-md-none position-relative"> <a class="Header-link" data-hotkey="g d" aria-label="Gist Homepage " href="/"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-mark-github v-align-middle d-inline-block d-md-none"> <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path> </svg> <svg aria-hidden="true" height="24" viewBox="0 0 68 24" version="1.1" width="68" data-view-component="true" class="octicon octicon-logo-github v-align-middle d-none d-md-inline-block"> <path d="M27.8 17.908h-.03c.013 0 .022.014.035.017l.01-.002-.016-.015Zm.005.017c-.14.001-.49.073-.861.073-1.17 0-1.575-.536-1.575-1.234v-4.652h2.385c.135 0 .24-.12.24-.283V9.302c0-.133-.12-.252-.24-.252H25.37V5.913c0-.119-.075-.193-.21-.193h-3.24c-.136 0-.21.074-.21.193V9.14s-1.636.401-1.741.416a.255.255 0 0 0-.195.253v2.021c0 .164.12.282.255.282h1.665v4.876c0 3.627 2.55 3.998 4.29 3.998.796 0 1.756-.252 1.906-.327.09-.03.135-.134.135-.238v-2.23a.264.264 0 0 0-.219-.265Zm35.549-3.272c0-2.69-1.095-3.047-2.25-2.928-.9.06-1.62.505-1.62.505v5.232s.735.506 1.83.536c1.545.044 2.04-.506 2.04-3.345ZM67 14.415c0 5.099-1.665 6.555-4.576 6.555-2.46 0-3.78-1.233-3.78-1.233s-.06.683-.135.773c-.045.089-.12.118-.21.118h-2.22c-.15 0-.286-.119-.286-.252l.03-16.514a.26.26 0 0 1 .255-.252h3.196a.26.26 0 0 1 .255.252v5.604s1.23-.788 3.03-.788l-.015-.03c1.8 0 4.456.67 4.456 5.767ZM53.918 9.05h-3.15c-.165 0-.255.119-.255.282v8.086s-.826.58-1.95.58c-1.126 0-1.456-.506-1.456-1.62v-7.06a.262.262 0 0 0-.255-.254h-3.21a.262.262 0 0 0-.256.253v7.596c0 3.27 1.846 4.087 4.381 4.087 2.085 0 3.78-1.145 3.78-1.145s.076.58.12.67c.03.074.136.133.24.133h2.011a.243.243 0 0 0 .255-.253l.03-11.103c0-.133-.12-.252-.285-.252Zm-35.556-.015h-3.195c-.135 0-.255.134-.255.297v10.91c0 .297.195.401.45.401h2.88c.3 0 .375-.134.375-.401V9.287a.262.262 0 0 0-.255-.252ZM16.787 4.01c-1.155 0-2.07.907-2.07 2.051 0 1.145.915 2.051 2.07 2.051a2.04 2.04 0 0 0 2.04-2.05 2.04 2.04 0 0 0-2.04-2.052Zm24.74-.372H38.36a.262.262 0 0 0-.255.253v6.08H33.14v-6.08a.262.262 0 0 0-.255-.253h-3.196a.262.262 0 0 0-.255.253v16.514c0 .133.135.252.255.252h3.196a.262.262 0 0 0 .255-.253v-7.06h4.966l-.03 7.06c0 .134.12.253.255.253h3.195a.262.262 0 0 0 .255-.253V3.892a.262.262 0 0 0-.255-.253Zm-28.31 7.313v8.532c0 .06-.015.163-.09.193 0 0-1.875 1.323-4.966 1.323C4.426 21 0 19.84 0 12.2S3.87 2.986 7.651 3c3.27 0 4.59.728 4.8.862.06.075.09.134.09.208l-.63 2.646c0 .134-.134.297-.3.253-.54-.164-1.35-.49-3.255-.49-2.205 0-4.575.623-4.575 5.543s2.25 5.5 3.87 5.5c1.38 0 1.875-.164 1.875-.164V13.94H7.321c-.165 0-.285-.12-.285-.253v-2.735c0-.134.12-.252.285-.252h5.61c.166 0 .286.118.286.252Z"></path> </svg> <svg aria-hidden="true" height="24" viewBox="0 0 38 24" version="1.1" width="38" data-view-component="true" class="octicon octicon-logo-gist v-align-middle d-none d-md-inline-block"> <path d="M7.05 13.095v-1.5h5.28v8.535c-1.17.555-2.925.96-5.385.96C1.665 21.09 0 17.055 0 12.045S1.695 3 6.945 3c2.43 0 3.96.495 4.92.99v1.575c-1.83-.75-3-1.095-4.92-1.095-3.855 0-5.22 3.315-5.22 7.59s1.365 7.575 5.205 7.575c1.335 0 2.97-.105 3.795-.51v-6.03H7.05Zm16.47 1.035h.045c3.33.3 4.125 1.425 4.125 3.345 0 1.815-1.14 3.615-4.71 3.615-1.125 0-2.745-.285-3.495-.585v-1.41c.705.255 1.83.54 3.495.54 2.43 0 3.09-1.035 3.09-2.13 0-1.065-.33-1.815-2.655-2.01-3.39-.3-4.095-1.5-4.095-3.12 0-1.665 1.08-3.465 4.38-3.465 1.095 0 2.34.135 3.375.585v1.41c-.915-.3-1.83-.54-3.405-.54-2.325 0-2.82.855-2.82 2.01 0 1.035.42 1.56 2.67 1.755Zm12.87-4.995v1.275h-3.63v7.305c0 1.425.795 2.01 2.25 2.01.3 0 .63 0 .915-.045v1.335c-.255.045-.75.075-1.035.075-1.965 0-3.75-.9-3.75-3.195v-7.5H28.8v-.72l2.34-.66V5.85l1.62-.465v3.75h3.63ZM16.635 9.09v9.615c0 .81.285 1.05 1.005 1.05v1.335c-1.71 0-2.58-.705-2.58-2.58V9.09h1.575Zm.375-3.495c0 .66-.51 1.17-1.17 1.17a1.14 1.14 0 0 1-1.155-1.17c0-.66.48-1.17 1.155-1.17s1.17.51 1.17 1.17Z"></path> </svg> </a> </div> <div class="Header-item f4 mr-0" role="navigation" aria-label="Sign in or sign up"> <a class="Header-link no-underline mr-3" data-ga-click="Header, sign in" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"gist header","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b","user_id":null}}" data-hydro-click-hmac="3499192e5fd20abba45de8e5eae5e7a83c4c5bf3b7e65cbb82159ffc2518b295" href="https://gist.github.com/auth/github?return_to=https%3A%2F%2Fgist.github.com%2Febidel%2F2d2bb0cdec3f2a16cf519dbaa791ce1b"> Sign in </a> <a class="Header-link d-inline-block no-underline border color-border-default rounded px-2 py-1" data-ga-click="Header, sign up" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"gist header","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b","user_id":null}}" data-hydro-click-hmac="0f6552d20c7e8789f6387e129513931df5d184887fe1e705ab8d0c3f59e6dc7e" href="/join?return_to=https%3A%2F%2Fgist.github.com%2Febidel%2F2d2bb0cdec3f2a16cf519dbaa791ce1b&source=header-gist"> Sign up </a> </div> </div> <div hidden="hidden" data-view-component="true" class="js-stale-session-flash stale-session-flash flash flash-warn flash-full"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <span class="js-stale-session-flash-signed-in" hidden>You signed in with another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <span class="js-stale-session-flash-signed-out" hidden>You signed out in another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <span class="js-stale-session-flash-switched" hidden>You switched accounts on another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <button id="icon-button-e9a19ffa-2ff9-4095-86af-86bd612a58a3" aria-labelledby="tooltip-bd83f14a-976e-4bc6-85da-85f4df7def54" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium flash-close js-flash-close"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x Button-visual"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button><tool-tip id="tooltip-bd83f14a-976e-4bc6-85da-85f4df7def54" for="icon-button-e9a19ffa-2ff9-4095-86af-86bd612a58a3" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Dismiss alert</tool-tip> </div> </div> <div id="start-of-content" class="show-on-focus"></div> <div id="js-flash-container" class="flash-container" data-turbo-replace> <template class="js-flash-template"> <div class="flash flash-full {{ className }}"> <div > <button autofocus class="flash-close js-flash-close" type="button" aria-label="Dismiss this message"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> <div aria-atomic="true" role="alert" class="js-flash-alert"> <div>{{ message }}</div> </div> </div> </div> </template> </div> <div class="application-main " data-commit-hovercards-enabled data-discussion-hovercards-enabled data-issue-and-pr-hovercards-enabled > <div itemscope itemtype="http://schema.org/Code"> <main id="gist-pjax-container"> <div class="gist-detail-intro gist-banner pb-3"> <div class="text-center container-lg px-3"> <p class="lead"> Instantly share code, notes, and snippets. </p> </div> </div> <div class="gisthead pagehead pb-0 pt-3 mb-4"> <div class="px-0"> <div class="mb-3 d-flex px-3 px-md-3 px-lg-5"> <div class="flex-auto min-width-0 width-fit mr-3"> <div class="d-flex"> <div class="d-none d-md-block"> <a class="mr-2 flex-shrink-0" data-hovercard-type="user" data-hovercard-url="/users/ebidel/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/ebidel"><img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/238208?s=64&v=4" width="32" height="32" alt="@ebidel" /></a> </div> <div class="d-flex flex-column width-full"> <div class="d-flex flex-row width-full"> <h1 class="wb-break-word f3 text-normal mb-md-0 mb-1"> <span class="author"><a data-hovercard-type="user" data-hovercard-url="/users/ebidel/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/ebidel">ebidel</a></span><!-- --><span class="mx-1 color-fg-muted">/</span><!-- --><strong itemprop="name" class="css-truncate-target mr-1" style="max-width: 410px"><a href="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b">fancy-tabs-demo.html</a></strong> </h1> </div> <div class="note m-0"> Last active <relative-time tense="past" datetime="2024-10-30T14:48:19Z" data-view-component="true">October 30, 2024 14:48</relative-time> </div> </div> </div> </div> <ul class="d-md-flex pagehead-actions float-none mr-2"> </ul> <div class="d-inline-block d-md-none ml-auto"> <action-menu data-select-variant="none" data-view-component="true" class="flex-self-start ml-auto d-inline-block"> <focus-group direction="vertical" mnemonics retain> <button id="gist_options-button" popovertarget="gist_options-overlay" aria-controls="gist_options-list" aria-haspopup="true" aria-labelledby="tooltip-ed009990-4073-41d2-8da4-f04b6818e679" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--small"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal Button-visual"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg> </button><tool-tip id="tooltip-ed009990-4073-41d2-8da4-f04b6818e679" for="gist_options-button" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Show Gist options</tool-tip> <anchored-position id="gist_options-overlay" anchor="gist_options-button" align="start" side="outside-bottom" anchor-offset="normal" popover="auto" data-view-component="true"> <div data-view-component="true" class="Overlay Overlay--size-auto"> <div data-view-component="true" class="Overlay-body Overlay-body--paddingNone"> <action-list> <div data-view-component="true"> <ul aria-labelledby="gist_options-button" id="gist_options-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap"> <li rel="nofollow" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"DOWNLOAD_ZIP","git_repository_type":"GIST","gist_id":38415559,"originating_url":"https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b","user_id":null}}" data-hydro-click-hmac="c7bdd65779c65bb3bee135868fe399d4484f134fae2440752cc1f4467d418478" data-ga-click="Gist, download zip, location:gist overview" data-targets="action-list.items" data-item-id="download_from_gist_options" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-04d20994-868d-4442-b0a7-3c8f3f6b7122" href="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/archive/17905f8a06bcfa115201b9510015a14cb1d4e17e.zip" role="menuitem" data-view-component="true" class="ActionListContent"> <span data-view-component="true" class="ActionListItem-label"> Download ZIP </span> </a> </li> </ul> </div></action-list> </div> </div></anchored-position> </focus-group> </action-menu> </div> <ul class="d-md-flex d-none pagehead-actions float-none"> <li> <a id="gist-star-button" href="/login?return_to=https%3A%2F%2Fgist.github.com%2Febidel%2F2d2bb0cdec3f2a16cf519dbaa791ce1b" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"gist star button","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b","user_id":null}}" data-hydro-click-hmac="34574f56770749459b3c61049bf971ca2b110248218d5a63dd00d3397b6cbf5d" aria-label="You must be signed in to star a gist" data-view-component="true" class="btn-with-count Button--secondary Button--small Button"> <span class="Button-content"> <span class="Button-visual Button-leadingVisual"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg> </span> <span class="Button-label">Star</span> <span class="Button-visual Button-trailingVisual"> <span class="sr-only">(<span aria-hidden="true" title="115" data-view-component="true" class="Counter">115</span>)</span> <span aria-hidden="true" title="115" data-view-component="true" class="Counter">115</span> </span> </span> </a><tool-tip id="tooltip-55739818-adba-428d-b9cb-e42507d6ee01" for="gist-star-button" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">You must be signed in to star a gist</tool-tip> </li> <li> <a id="gist-fork-button" href="/login?return_to=https%3A%2F%2Fgist.github.com%2Febidel%2F2d2bb0cdec3f2a16cf519dbaa791ce1b" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"gist fork button","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b","user_id":null}}" data-hydro-click-hmac="8c7385d4c2d2adabd0da547206bbf968c2ec83e4ae55d9d5d0b33e25eeaf9f3c" aria-label="You must be signed in to fork a gist" data-view-component="true" class="btn-with-count Button--secondary Button--small Button"> <span class="Button-content"> <span class="Button-visual Button-leadingVisual"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked"> <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path> </svg> </span> <span class="Button-label">Fork</span> <span class="Button-visual Button-trailingVisual"> <span class="sr-only">(<span aria-hidden="true" title="35" data-view-component="true" class="Counter">35</span>)</span> <span aria-hidden="true" title="35" data-view-component="true" class="Counter">35</span> </span> </span> </a><tool-tip id="tooltip-62f253c5-0793-4a2e-9ea8-76985c173659" for="gist-fork-button" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">You must be signed in to fork a gist</tool-tip> </li> </ul> </div> <ul class="d-flex d-md-none px-3 mb-2 pagehead-actions float-none" > <li> <div data-view-component="true" class="flex-items-center d-inline-flex"> <action-menu data-menu-input="gist-share-url-sized-down" data-select-variant="single" data-dynamic-label="" data-view-component="true" class="flex-shrink-0"> <focus-group direction="vertical" mnemonics retain> <button id="action-menu-85eb07e0-3b16-4f42-a32c-7e0e481dc794-button" popovertarget="action-menu-85eb07e0-3b16-4f42-a32c-7e0e481dc794-overlay" aria-controls="action-menu-85eb07e0-3b16-4f42-a32c-7e0e481dc794-list" aria-haspopup="true" type="button" data-view-component="true" class="rounded-right-0 border-right-0 Button--secondary Button--small Button"> <span class="Button-content"> <span class="Button-label">Embed</span> </span> <span class="Button-visual Button-trailingAction"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </span> </button> <anchored-position id="action-menu-85eb07e0-3b16-4f42-a32c-7e0e481dc794-overlay" anchor="action-menu-85eb07e0-3b16-4f42-a32c-7e0e481dc794-button" align="start" side="outside-bottom" anchor-offset="normal" popover="auto" data-view-component="true"> <div data-view-component="true" class="Overlay Overlay--size-auto"> <div data-view-component="true" class="Overlay-body Overlay-body--paddingNone"> <action-list> <div data-view-component="true"> <ul aria-labelledby="action-menu-85eb07e0-3b16-4f42-a32c-7e0e481dc794-button" id="action-menu-85eb07e0-3b16-4f42-a32c-7e0e481dc794-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap"> <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <button value="<script src="https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b.js"></script>" tabindex="-1" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"EMBED","git_repository_type":"GIST","gist_id":38415559,"originating_url":"https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b","user_id":null}}" data-hydro-click-hmac="9678dbdde050e650c773e15db28be915bd34f4fc968129b054ab718d21efda53" id="item-ca20cbc5-2dec-4d8b-8812-4c5cd1b19a3e" type="button" role="menuitemradio" aria-checked="true" data-view-component="true" class="ActionListContent"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-descriptionWrap"> <span data-view-component="true" class="ActionListItem-label"> Embed </span> <span data-view-component="true" class="ActionListItem-description">Embed this gist in your website.</span> </span></button> </li> <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <button value="https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b" tabindex="-1" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"SHARE","git_repository_type":"GIST","gist_id":38415559,"originating_url":"https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b","user_id":null}}" data-hydro-click-hmac="93e4e6b09cd375d77e7ca9dd302534d4131709b31d6886cd2660182efda3ee4b" id="item-6ddd7cbb-b271-41e8-b962-2093c7055882" type="button" role="menuitemradio" aria-checked="false" data-view-component="true" class="ActionListContent"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-descriptionWrap"> <span data-view-component="true" class="ActionListItem-label"> Share </span> <span data-view-component="true" class="ActionListItem-description">Copy sharable link for this gist.</span> </span></button> </li> <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <button value="https://gist.github.com/2d2bb0cdec3f2a16cf519dbaa791ce1b.git" tabindex="-1" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"USE_HTTPS","git_repository_type":"GIST","gist_id":38415559,"originating_url":"https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b","user_id":null}}" data-hydro-click-hmac="4c4ad0ff6d1cf19052acc72ff0b61082729881259e022a8d4bec2a1dbf26b743" id="item-7d7e113a-5102-48aa-8155-0048d1dbf256" type="button" role="menuitemradio" aria-checked="false" data-view-component="true" class="ActionListContent"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-descriptionWrap"> <span data-view-component="true" class="ActionListItem-label"> Clone via HTTPS </span> <span data-view-component="true" class="ActionListItem-description">Clone using the web URL.</span> </span></button> </li> <li role="presentation" aria-hidden="true" data-view-component="true" class="ActionList-sectionDivider"></li> <li target="_blank" rel="noopener noreferrer" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-fe8c3b6c-574c-45f8-8af7-8693eebcde60" href="https://docs.github.com/articles/which-remote-url-should-i-use" role="menuitemradio" aria-checked="false" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-question"> <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Learn more about clone URLs </span> </a> </li> </ul> </div></action-list> </div> </div></anchored-position> </focus-group> </action-menu> <primer-text-field class="FormControl width-full FormControl--fullWidth"> <label for="gist-share-url-sized-down" class="sr-only FormControl-label"> Clone this repository at &lt;script src=&quot;https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b.js&quot;&gt;&lt;/script&gt; </label> <div class="FormControl-input-wrap FormControl-input-wrap--small"> <input id="gist-share-url-sized-down" aria-label="Clone this repository at &lt;script src=&quot;https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b.js&quot;&gt;&lt;/script&gt;" value="<script src="https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b.js"></script>" readonly="readonly" data-autoselect="true" data-target="primer-text-field.inputElement " aria-describedby="validation-311d3c14-f07c-4361-b15e-7f219d16993a" class="form-control FormControl-monospace FormControl-input FormControl-small rounded-left-0 rounded-right-0 border-right-0" type="text" name="gist-share-url-sized-down" /> </div> <div class="FormControl-inlineValidation" id="validation-311d3c14-f07c-4361-b15e-7f219d16993a" hidden="hidden"> <span class="FormControl-inlineValidation--visual" data-target="primer-text-field.validationSuccessIcon" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill"> <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path> </svg></span> <span class=" FormControl-inlineValidation--visual" data-target="primer-text-field.validationErrorIcon"><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill"> <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path> </svg></span> <span></span> </div> </primer-text-field> <span data-view-component="true"> <clipboard-copy id="clipboard-button" aria-label="Copy" for="gist-share-url-sized-down" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"COPY_URL","git_repository_type":"GIST","gist_id":38415559,"originating_url":"https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b","user_id":null}}" data-hydro-click-hmac="b7c005352266cd604021ffcade2013ab1d481d0a728f37b98ee5fc3804d418d5" type="button" data-view-component="true" class="rounded-left-0 Button--secondary Button--small Button"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg style="display: none;" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check color-fg-success"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </div> </li> <li> <button href="https://desktop.github.com" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"OPEN_IN_DESKTOP","git_repository_type":"GIST","gist_id":38415559,"originating_url":"https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b","user_id":null}}" data-hydro-click-hmac="d2c1820ec945bdad7d5910b5abec16ad81fef866add8cb73aa15b1120977e679" data-platforms="windows,mac" id="icon-button-76b50f89-342a-4c08-b87f-b9c006d0bbd9" aria-labelledby="tooltip-acabb442-95ac-41d5-845e-7c5f201c8128" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--small js-remove-unless-platform"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-desktop-download Button-visual"> <path d="m4.927 5.427 2.896 2.896a.25.25 0 0 0 .354 0l2.896-2.896A.25.25 0 0 0 10.896 5H8.75V.75a.75.75 0 1 0-1.5 0V5H5.104a.25.25 0 0 0-.177.427Z"></path><path d="M1.573 2.573a.25.25 0 0 0-.073.177v7.5a.25.25 0 0 0 .25.25h12.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25h-3a.75.75 0 1 1 0-1.5h3A1.75 1.75 0 0 1 16 2.75v7.5A1.75 1.75 0 0 1 14.25 12h-3.727c.099 1.041.52 1.872 1.292 2.757A.75.75 0 0 1 11.25 16h-6.5a.75.75 0 0 1-.565-1.243c.772-.885 1.192-1.716 1.292-2.757H1.75A1.75 1.75 0 0 1 0 10.25v-7.5A1.75 1.75 0 0 1 1.75 1h3a.75.75 0 0 1 0 1.5h-3a.25.25 0 0 0-.177.073ZM6.982 12a5.72 5.72 0 0 1-.765 2.5h3.566a5.72 5.72 0 0 1-.765-2.5H6.982Z"></path> </svg> </button><tool-tip id="tooltip-acabb442-95ac-41d5-845e-7c5f201c8128" for="icon-button-76b50f89-342a-4c08-b87f-b9c006d0bbd9" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Save ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b to your computer and use it in GitHub Desktop.</tool-tip> </li> </ul> <div class="d-flex flex-md-row flex-column px-0 pr-md-3 px-lg-5"> <div class="flex-md-order-1 flex-order-2 flex-auto"> <nav class="UnderlineNav box-shadow-none px-3 px-lg-0" aria-label="Gist" data-pjax="#gist-pjax-container"> <div class="UnderlineNav-body"> <a class="js-selected-navigation-item selected UnderlineNav-item" data-pjax="true" data-hotkey="g c" aria-current="page" data-selected-links="gist_code /ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b" href="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code UnderlineNav-octicon"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> Code </a> <a class="js-selected-navigation-item UnderlineNav-item" data-pjax="true" data-hotkey="g r" data-selected-links="gist_revisions /ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/revisions" href="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/revisions"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-commit UnderlineNav-octicon"> <path d="M11.93 8.5a4.002 4.002 0 0 1-7.86 0H.75a.75.75 0 0 1 0-1.5h3.32a4.002 4.002 0 0 1 7.86 0h3.32a.75.75 0 0 1 0 1.5Zm-1.43-.75a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"></path> </svg> Revisions <span title="25" data-view-component="true" class="Counter">25</span> </a> <a class="js-selected-navigation-item UnderlineNav-item" data-pjax="true" data-hotkey="g s" data-selected-links="gist_stars /ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/stargazers" href="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/stargazers"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star UnderlineNav-octicon"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg> Stars <span title="111" data-view-component="true" class="Counter">111</span> </a> <a class="js-selected-navigation-item UnderlineNav-item" data-pjax="true" data-hotkey="g f" data-selected-links="gist_forks /ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/forks" href="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/forks"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-branch UnderlineNav-octicon"> <path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path> </svg> Forks <span title="35" data-view-component="true" class="Counter">35</span> </a> </div> </nav> </div> <div class="d-md-flex d-none flex-items-center flex-md-order-2 flex-order-1" data-multiple> <div data-view-component="true" class="flex-items-center d-inline-flex"> <action-menu data-menu-input="gist-share-url-original" data-select-variant="single" data-dynamic-label="" data-view-component="true" class="flex-shrink-0"> <focus-group direction="vertical" mnemonics retain> <button id="action-menu-41235924-68a4-4138-ae6e-4a22ac94c95f-button" popovertarget="action-menu-41235924-68a4-4138-ae6e-4a22ac94c95f-overlay" aria-controls="action-menu-41235924-68a4-4138-ae6e-4a22ac94c95f-list" aria-haspopup="true" type="button" data-view-component="true" class="rounded-right-0 border-right-0 Button--secondary Button--small Button"> <span class="Button-content"> <span class="Button-label">Embed</span> </span> <span class="Button-visual Button-trailingAction"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </span> </button> <anchored-position id="action-menu-41235924-68a4-4138-ae6e-4a22ac94c95f-overlay" anchor="action-menu-41235924-68a4-4138-ae6e-4a22ac94c95f-button" align="start" side="outside-bottom" anchor-offset="normal" popover="auto" data-view-component="true"> <div data-view-component="true" class="Overlay Overlay--size-auto"> <div data-view-component="true" class="Overlay-body Overlay-body--paddingNone"> <action-list> <div data-view-component="true"> <ul aria-labelledby="action-menu-41235924-68a4-4138-ae6e-4a22ac94c95f-button" id="action-menu-41235924-68a4-4138-ae6e-4a22ac94c95f-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap"> <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <button value="<script src="https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b.js"></script>" tabindex="-1" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"EMBED","git_repository_type":"GIST","gist_id":38415559,"originating_url":"https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b","user_id":null}}" data-hydro-click-hmac="9678dbdde050e650c773e15db28be915bd34f4fc968129b054ab718d21efda53" id="item-0da0d50c-9eb4-4ecd-bb15-7f1aff924b8c" type="button" role="menuitemradio" aria-checked="true" data-view-component="true" class="ActionListContent"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-descriptionWrap"> <span data-view-component="true" class="ActionListItem-label"> Embed </span> <span data-view-component="true" class="ActionListItem-description">Embed this gist in your website.</span> </span></button> </li> <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <button value="https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b" tabindex="-1" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"SHARE","git_repository_type":"GIST","gist_id":38415559,"originating_url":"https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b","user_id":null}}" data-hydro-click-hmac="93e4e6b09cd375d77e7ca9dd302534d4131709b31d6886cd2660182efda3ee4b" id="item-771cc4a4-6120-4800-9c5d-2d342b999ac1" type="button" role="menuitemradio" aria-checked="false" data-view-component="true" class="ActionListContent"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-descriptionWrap"> <span data-view-component="true" class="ActionListItem-label"> Share </span> <span data-view-component="true" class="ActionListItem-description">Copy sharable link for this gist.</span> </span></button> </li> <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <button value="https://gist.github.com/2d2bb0cdec3f2a16cf519dbaa791ce1b.git" tabindex="-1" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"USE_HTTPS","git_repository_type":"GIST","gist_id":38415559,"originating_url":"https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b","user_id":null}}" data-hydro-click-hmac="4c4ad0ff6d1cf19052acc72ff0b61082729881259e022a8d4bec2a1dbf26b743" id="item-d8ef3511-e21e-45bf-b0c1-16e8adfe0982" type="button" role="menuitemradio" aria-checked="false" data-view-component="true" class="ActionListContent"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-descriptionWrap"> <span data-view-component="true" class="ActionListItem-label"> Clone via HTTPS </span> <span data-view-component="true" class="ActionListItem-description">Clone using the web URL.</span> </span></button> </li> <li role="presentation" aria-hidden="true" data-view-component="true" class="ActionList-sectionDivider"></li> <li target="_blank" rel="noopener noreferrer" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-55b5e925-e1ff-4762-9773-2acb44f4f874" href="https://docs.github.com/articles/which-remote-url-should-i-use" role="menuitemradio" aria-checked="false" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-question"> <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Learn more about clone URLs </span> </a> </li> </ul> </div></action-list> </div> </div></anchored-position> </focus-group> </action-menu> <primer-text-field class="FormControl width-full FormControl--fullWidth"> <label for="gist-share-url-original" class="sr-only FormControl-label"> Clone this repository at &lt;script src=&quot;https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b.js&quot;&gt;&lt;/script&gt; </label> <div class="FormControl-input-wrap FormControl-input-wrap--small"> <input id="gist-share-url-original" aria-label="Clone this repository at &lt;script src=&quot;https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b.js&quot;&gt;&lt;/script&gt;" value="<script src="https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b.js"></script>" readonly="readonly" data-autoselect="true" data-target="primer-text-field.inputElement " aria-describedby="validation-e9a8d56b-fe75-4225-9b32-ea36cb2346f7" class="form-control FormControl-monospace FormControl-input FormControl-small rounded-left-0 rounded-right-0 border-right-0" type="text" name="gist-share-url-original" /> </div> <div class="FormControl-inlineValidation" id="validation-e9a8d56b-fe75-4225-9b32-ea36cb2346f7" hidden="hidden"> <span class="FormControl-inlineValidation--visual" data-target="primer-text-field.validationSuccessIcon" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill"> <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path> </svg></span> <span class=" FormControl-inlineValidation--visual" data-target="primer-text-field.validationErrorIcon"><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill"> <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path> </svg></span> <span></span> </div> </primer-text-field> <span data-view-component="true"> <clipboard-copy id="clipboard-button" aria-label="Copy" for="gist-share-url-original" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"COPY_URL","git_repository_type":"GIST","gist_id":38415559,"originating_url":"https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b","user_id":null}}" data-hydro-click-hmac="b7c005352266cd604021ffcade2013ab1d481d0a728f37b98ee5fc3804d418d5" type="button" data-view-component="true" class="rounded-left-0 Button--secondary Button--small Button"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg style="display: none;" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check color-fg-success"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </div> <div class="ml-2"> <button href="https://desktop.github.com" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"OPEN_IN_DESKTOP","git_repository_type":"GIST","gist_id":38415559,"originating_url":"https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b","user_id":null}}" data-hydro-click-hmac="d2c1820ec945bdad7d5910b5abec16ad81fef866add8cb73aa15b1120977e679" data-platforms="windows,mac" id="icon-button-a71dd64b-09b0-4626-a95a-4cece2a09129" aria-labelledby="tooltip-69c9ec12-1994-4cd2-b808-7d441933577c" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--small js-remove-unless-platform"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-desktop-download Button-visual"> <path d="m4.927 5.427 2.896 2.896a.25.25 0 0 0 .354 0l2.896-2.896A.25.25 0 0 0 10.896 5H8.75V.75a.75.75 0 1 0-1.5 0V5H5.104a.25.25 0 0 0-.177.427Z"></path><path d="M1.573 2.573a.25.25 0 0 0-.073.177v7.5a.25.25 0 0 0 .25.25h12.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25h-3a.75.75 0 1 1 0-1.5h3A1.75 1.75 0 0 1 16 2.75v7.5A1.75 1.75 0 0 1 14.25 12h-3.727c.099 1.041.52 1.872 1.292 2.757A.75.75 0 0 1 11.25 16h-6.5a.75.75 0 0 1-.565-1.243c.772-.885 1.192-1.716 1.292-2.757H1.75A1.75 1.75 0 0 1 0 10.25v-7.5A1.75 1.75 0 0 1 1.75 1h3a.75.75 0 0 1 0 1.5h-3a.25.25 0 0 0-.177.073ZM6.982 12a5.72 5.72 0 0 1-.765 2.5h3.566a5.72 5.72 0 0 1-.765-2.5H6.982Z"></path> </svg> </button><tool-tip id="tooltip-69c9ec12-1994-4cd2-b808-7d441933577c" for="icon-button-a71dd64b-09b0-4626-a95a-4cece2a09129" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Save ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b to your computer and use it in GitHub Desktop.</tool-tip> </div> <div class="ml-2"> <a class="btn btn-sm" rel="nofollow" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"DOWNLOAD_ZIP","git_repository_type":"GIST","gist_id":38415559,"originating_url":"https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b","user_id":null}}" data-hydro-click-hmac="c7bdd65779c65bb3bee135868fe399d4484f134fae2440752cc1f4467d418478" data-ga-click="Gist, download zip, location:gist overview" href="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/archive/17905f8a06bcfa115201b9510015a14cb1d4e17e.zip">Download ZIP</a> </div> </div> </div> </div> </div> <div class="container-lg px-3"> <div class="repository-content gist-content" > <div> <div itemprop="about"> Fancy tabs web component - shadow dom v1, custom elements v1, full a11y </div> <div class="js-gist-file-update-container js-task-list-container"> <div id="file-fancy-tabs-demo-html" class="file my-2"> <div class="file-header d-flex flex-md-items-center flex-items-start"> <div class="file-actions flex-order-2 pt-0"> <a href="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/raw/17905f8a06bcfa115201b9510015a14cb1d4e17e/fancy-tabs-demo.html" data-view-component="true" class="Button--secondary Button--small Button"> <span class="Button-content"> <span class="Button-label">Raw</span> </span> </a> </div> <div class="file-info pr-4 d-flex flex-md-items-center flex-items-start flex-order-1 flex-auto"> <span class="mr-1"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code-square color-fg-muted"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25Zm7.47 3.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L10.69 8 9.22 6.53a.75.75 0 0 1 0-1.06ZM6.78 6.53 5.31 8l1.47 1.47a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </span> <a class="wb-break-all" href="#file-fancy-tabs-demo-html"> <strong class="user-select-contain gist-blob-name css-truncate-target"> fancy-tabs-demo.html </strong> </a> </div> </div> <div itemprop="text" class="Box-body p-0 blob-wrapper data type-html gist-border-0"> <div class="js-check-bidi js-blob-code-container blob-code-content"> <template class="js-file-alert-template"> <div data-view-component="true" class="flash flash-warn flash-full d-flex flex-items-center"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <span> This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. <a class="Link--inTextBlock" href="https://github.co/hiddenchars" target="_blank">Learn more about bidirectional Unicode characters</a> </span> <div data-view-component="true" class="flash-action"> <a href="{{ revealButtonHref }}" data-view-component="true" class="btn-sm btn"> Show hidden characters </a> </div> </div></template> <template class="js-line-alert-template"> <span aria-label="This line has hidden Unicode characters" data-view-component="true" class="line-alert tooltipped tooltipped-e"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </span></template> <table data-hpc class="highlight tab-size js-file-line-container js-code-nav-container js-tagsearch-file" data-tab-size="8" data-paste-markdown-skip data-tagsearch-lang="HTML" data-tagsearch-path="fancy-tabs-demo.html"> <tr> <td id="file-fancy-tabs-demo-html-L1" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="1"></td> <td id="file-fancy-tabs-demo-html-LC1" class="blob-code blob-code-inner js-file-line"><span class=pl-kos><</span><span class=pl-ent>script</span> <span class=pl-c1>src</span>="<span class=pl-s>https://unpkg.com/@webcomponents/custom-elements</span>"<span class=pl-kos>></span><span class=pl-kos></</span><span class=pl-ent>script</span><span class=pl-kos>></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L2" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="2"></td> <td id="file-fancy-tabs-demo-html-LC2" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L3" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="3"></td> <td id="file-fancy-tabs-demo-html-LC3" class="blob-code blob-code-inner js-file-line"><span class=pl-kos><</span><span class=pl-ent>style</span><span class=pl-kos>></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L4" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="4"></td> <td id="file-fancy-tabs-demo-html-LC4" class="blob-code blob-code-inner js-file-line"> body {</td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L5" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="5"></td> <td id="file-fancy-tabs-demo-html-LC5" class="blob-code blob-code-inner js-file-line"> margin: 0;</td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L6" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="6"></td> <td id="file-fancy-tabs-demo-html-LC6" class="blob-code blob-code-inner js-file-line"> }</td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L7" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="7"></td> <td id="file-fancy-tabs-demo-html-LC7" class="blob-code blob-code-inner js-file-line"> /* Style the element from the outside */</td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L8" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="8"></td> <td id="file-fancy-tabs-demo-html-LC8" class="blob-code blob-code-inner js-file-line"> /*</td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L9" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="9"></td> <td id="file-fancy-tabs-demo-html-LC9" class="blob-code blob-code-inner js-file-line"> fancy-tabs {</td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L10" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="10"></td> <td id="file-fancy-tabs-demo-html-LC10" class="blob-code blob-code-inner js-file-line"> margin-bottom: 32px;</td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L11" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="11"></td> <td id="file-fancy-tabs-demo-html-LC11" class="blob-code blob-code-inner js-file-line"> --background-color: black;</td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L12" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="12"></td> <td id="file-fancy-tabs-demo-html-LC12" class="blob-code blob-code-inner js-file-line"> }*/</td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L13" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="13"></td> <td id="file-fancy-tabs-demo-html-LC13" class="blob-code blob-code-inner js-file-line"><span class=pl-kos></</span><span class=pl-ent>style</span><span class=pl-kos>></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L14" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="14"></td> <td id="file-fancy-tabs-demo-html-LC14" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L15" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="15"></td> <td id="file-fancy-tabs-demo-html-LC15" class="blob-code blob-code-inner js-file-line"><span class=pl-kos><</span><span class=pl-ent>fancy-tabs</span> <span class=pl-c1>background</span><span class=pl-kos>></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L16" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="16"></td> <td id="file-fancy-tabs-demo-html-LC16" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos><</span><span class=pl-ent>button</span> <span class=pl-c1>slot</span>="<span class=pl-s>title</span>"<span class=pl-kos>></span>Tab 1<span class=pl-kos></</span><span class=pl-ent>button</span><span class=pl-kos>></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L17" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="17"></td> <td id="file-fancy-tabs-demo-html-LC17" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos><</span><span class=pl-ent>button</span> <span class=pl-c1>slot</span>="<span class=pl-s>title</span>" <span class=pl-c1>selected</span><span class=pl-kos>></span>Tab 2<span class=pl-kos></</span><span class=pl-ent>button</span><span class=pl-kos>></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L18" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="18"></td> <td id="file-fancy-tabs-demo-html-LC18" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos><</span><span class=pl-ent>button</span> <span class=pl-c1>slot</span>="<span class=pl-s>title</span>"<span class=pl-kos>></span>Tab 3<span class=pl-kos></</span><span class=pl-ent>button</span><span class=pl-kos>></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L19" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="19"></td> <td id="file-fancy-tabs-demo-html-LC19" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos><</span><span class=pl-ent>section</span><span class=pl-kos>></span>content panel 1<span class=pl-kos></</span><span class=pl-ent>section</span><span class=pl-kos>></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L20" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="20"></td> <td id="file-fancy-tabs-demo-html-LC20" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos><</span><span class=pl-ent>section</span><span class=pl-kos>></span>content panel 2<span class=pl-kos></</span><span class=pl-ent>section</span><span class=pl-kos>></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L21" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="21"></td> <td id="file-fancy-tabs-demo-html-LC21" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos><</span><span class=pl-ent>section</span><span class=pl-kos>></span>content panel 3<span class=pl-kos></</span><span class=pl-ent>section</span><span class=pl-kos>></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L22" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="22"></td> <td id="file-fancy-tabs-demo-html-LC22" class="blob-code blob-code-inner js-file-line"><span class=pl-kos></</span><span class=pl-ent>fancy-tabs</span><span class=pl-kos>></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L23" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="23"></td> <td id="file-fancy-tabs-demo-html-LC23" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L24" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="24"></td> <td id="file-fancy-tabs-demo-html-LC24" class="blob-code blob-code-inner js-file-line"><span class=pl-c><!-- Using <a> instead of button still works! --></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L25" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="25"></td> <td id="file-fancy-tabs-demo-html-LC25" class="blob-code blob-code-inner js-file-line"><span class=pl-c><!-- <fancy-tabs background></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L26" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="26"></td> <td id="file-fancy-tabs-demo-html-LC26" class="blob-code blob-code-inner js-file-line"><span class=pl-c> <a slot="title">Title 1</a></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L27" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="27"></td> <td id="file-fancy-tabs-demo-html-LC27" class="blob-code blob-code-inner js-file-line"><span class=pl-c> <a slot="title" selected>Title 2</a></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L28" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="28"></td> <td id="file-fancy-tabs-demo-html-LC28" class="blob-code blob-code-inner js-file-line"><span class=pl-c> <a slot="title">Title 3</a></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L29" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="29"></td> <td id="file-fancy-tabs-demo-html-LC29" class="blob-code blob-code-inner js-file-line"><span class=pl-c> <section>content panel 1</section></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L30" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="30"></td> <td id="file-fancy-tabs-demo-html-LC30" class="blob-code blob-code-inner js-file-line"><span class=pl-c> <section>content panel 2</section></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L31" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="31"></td> <td id="file-fancy-tabs-demo-html-LC31" class="blob-code blob-code-inner js-file-line"><span class=pl-c> <section>content panel 3</section></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L32" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="32"></td> <td id="file-fancy-tabs-demo-html-LC32" class="blob-code blob-code-inner js-file-line"><span class=pl-c></fancy-tabs> --></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L33" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="33"></td> <td id="file-fancy-tabs-demo-html-LC33" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L34" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="34"></td> <td id="file-fancy-tabs-demo-html-LC34" class="blob-code blob-code-inner js-file-line"><span class=pl-kos><</span><span class=pl-ent>script</span><span class=pl-kos>></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L35" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="35"></td> <td id="file-fancy-tabs-demo-html-LC35" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos>(</span><span class=pl-k>function</span> <span class=pl-kos>(</span><span class=pl-kos>)</span> <span class=pl-kos>{</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L36" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="36"></td> <td id="file-fancy-tabs-demo-html-LC36" class="blob-code blob-code-inner js-file-line"> <span class=pl-s>'use strict'</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L37" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="37"></td> <td id="file-fancy-tabs-demo-html-LC37" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L38" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="38"></td> <td id="file-fancy-tabs-demo-html-LC38" class="blob-code blob-code-inner js-file-line"> <span class=pl-c>// Feature detect</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L39" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="39"></td> <td id="file-fancy-tabs-demo-html-LC39" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>if</span> <span class=pl-kos>(</span><span class=pl-c1>!</span><span class=pl-kos>(</span><span class=pl-smi>window</span><span class=pl-kos>.</span><span class=pl-c1>customElements</span> <span class=pl-c1>&&</span> <span class=pl-smi>document</span><span class=pl-kos>.</span><span class=pl-c1>body</span><span class=pl-kos>.</span><span class=pl-c1>attachShadow</span><span class=pl-kos>)</span><span class=pl-kos>)</span> <span class=pl-kos>{</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L40" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="40"></td> <td id="file-fancy-tabs-demo-html-LC40" class="blob-code blob-code-inner js-file-line"> <span class=pl-smi>document</span><span class=pl-kos>.</span><span class=pl-en>querySelector</span><span class=pl-kos>(</span><span class=pl-s>'fancy-tabs'</span><span class=pl-kos>)</span><span class=pl-kos>.</span><span class=pl-c1>innerHTML</span> <span class=pl-c1>=</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L41" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="41"></td> <td id="file-fancy-tabs-demo-html-LC41" class="blob-code blob-code-inner js-file-line"> <span class=pl-s>"<b>Your browser doesn't support Shadow DOM and Custom Elements v1.</b>"</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L42" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="42"></td> <td id="file-fancy-tabs-demo-html-LC42" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>return</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L43" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="43"></td> <td id="file-fancy-tabs-demo-html-LC43" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos>}</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L44" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="44"></td> <td id="file-fancy-tabs-demo-html-LC44" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L45" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="45"></td> <td id="file-fancy-tabs-demo-html-LC45" class="blob-code blob-code-inner js-file-line"> <span class=pl-c>// See https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L46" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="46"></td> <td id="file-fancy-tabs-demo-html-LC46" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L47" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="47"></td> <td id="file-fancy-tabs-demo-html-LC47" class="blob-code blob-code-inner js-file-line"> <span class=pl-s1>customElements</span><span class=pl-kos>.</span><span class=pl-en>define</span><span class=pl-kos>(</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L48" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="48"></td> <td id="file-fancy-tabs-demo-html-LC48" class="blob-code blob-code-inner js-file-line"> <span class=pl-s>'fancy-tabs'</span><span class=pl-kos>,</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L49" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="49"></td> <td id="file-fancy-tabs-demo-html-LC49" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>class</span> <span class=pl-k>extends</span> <span class=pl-v>HTMLElement</span> <span class=pl-kos>{</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L50" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="50"></td> <td id="file-fancy-tabs-demo-html-LC50" class="blob-code blob-code-inner js-file-line"> #<span class=pl-c1>shadowRoot</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L51" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="51"></td> <td id="file-fancy-tabs-demo-html-LC51" class="blob-code blob-code-inner js-file-line"> #<span class=pl-c1>tabsSlot</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L52" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="52"></td> <td id="file-fancy-tabs-demo-html-LC52" class="blob-code blob-code-inner js-file-line"> #<span class=pl-c1>selected</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L53" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="53"></td> <td id="file-fancy-tabs-demo-html-LC53" class="blob-code blob-code-inner js-file-line"> #<span class=pl-c1>boundOnTitleClick</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L54" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="54"></td> <td id="file-fancy-tabs-demo-html-LC54" class="blob-code blob-code-inner js-file-line"> #<span class=pl-c1>boundOnKeyDown</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L55" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="55"></td> <td id="file-fancy-tabs-demo-html-LC55" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L56" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="56"></td> <td id="file-fancy-tabs-demo-html-LC56" class="blob-code blob-code-inner js-file-line"> <span class=pl-c1>panels</span> <span class=pl-c1>=</span> <span class=pl-kos>[</span><span class=pl-kos>]</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L57" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="57"></td> <td id="file-fancy-tabs-demo-html-LC57" class="blob-code blob-code-inner js-file-line"> <span class=pl-c1>tabs</span> <span class=pl-c1>=</span> <span class=pl-kos>[</span><span class=pl-kos>]</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L58" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="58"></td> <td id="file-fancy-tabs-demo-html-LC58" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L59" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="59"></td> <td id="file-fancy-tabs-demo-html-LC59" class="blob-code blob-code-inner js-file-line"> <span class=pl-en>constructor</span><span class=pl-kos>(</span><span class=pl-kos>)</span> <span class=pl-kos>{</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L60" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="60"></td> <td id="file-fancy-tabs-demo-html-LC60" class="blob-code blob-code-inner js-file-line"> <span class=pl-smi>super</span><span class=pl-kos>(</span><span class=pl-kos>)</span><span class=pl-kos>;</span> <span class=pl-c>// always call super() first in the ctor.</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L61" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="61"></td> <td id="file-fancy-tabs-demo-html-LC61" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L62" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="62"></td> <td id="file-fancy-tabs-demo-html-LC62" class="blob-code blob-code-inner js-file-line"> <span class=pl-c>// Create shadow DOM for the component.</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L63" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="63"></td> <td id="file-fancy-tabs-demo-html-LC63" class="blob-code blob-code-inner js-file-line"> <span class=pl-smi>this</span><span class=pl-kos>.</span>#<span class=pl-c1>shadowRoot</span> <span class=pl-c1>=</span> <span class=pl-smi>this</span><span class=pl-kos>.</span><span class=pl-en>attachShadow</span><span class=pl-kos>(</span><span class=pl-kos>{</span> <span class=pl-c1>mode</span>: <span class=pl-s>'open'</span> <span class=pl-kos>}</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L64" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="64"></td> <td id="file-fancy-tabs-demo-html-LC64" class="blob-code blob-code-inner js-file-line"> <span class=pl-smi>this</span><span class=pl-kos>.</span>#<span class=pl-c1>shadowRoot</span><span class=pl-kos>.</span><span class=pl-c1>innerHTML</span> <span class=pl-c1>=</span> <span class=pl-s>`</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L65" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="65"></td> <td id="file-fancy-tabs-demo-html-LC65" class="blob-code blob-code-inner js-file-line"><span class=pl-s> <style></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L66" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="66"></td> <td id="file-fancy-tabs-demo-html-LC66" class="blob-code blob-code-inner js-file-line"><span class=pl-s> :host {</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L67" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="67"></td> <td id="file-fancy-tabs-demo-html-LC67" class="blob-code blob-code-inner js-file-line"><span class=pl-s> display: inline-block;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L68" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="68"></td> <td id="file-fancy-tabs-demo-html-LC68" class="blob-code blob-code-inner js-file-line"><span class=pl-s> width: 100%;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L69" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="69"></td> <td id="file-fancy-tabs-demo-html-LC69" class="blob-code blob-code-inner js-file-line"><span class=pl-s> font-family: 'Roboto Slab';</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L70" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="70"></td> <td id="file-fancy-tabs-demo-html-LC70" class="blob-code blob-code-inner js-file-line"><span class=pl-s> contain: content;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L71" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="71"></td> <td id="file-fancy-tabs-demo-html-LC71" class="blob-code blob-code-inner js-file-line"><span class=pl-s> }</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L72" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="72"></td> <td id="file-fancy-tabs-demo-html-LC72" class="blob-code blob-code-inner js-file-line"><span class=pl-s> :host([background]) {</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L73" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="73"></td> <td id="file-fancy-tabs-demo-html-LC73" class="blob-code blob-code-inner js-file-line"><span class=pl-s> background: var(--background-color, #9E9E9E);</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L74" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="74"></td> <td id="file-fancy-tabs-demo-html-LC74" class="blob-code blob-code-inner js-file-line"><span class=pl-s> border-radius: 10px;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L75" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="75"></td> <td id="file-fancy-tabs-demo-html-LC75" class="blob-code blob-code-inner js-file-line"><span class=pl-s> padding: 10px;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L76" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="76"></td> <td id="file-fancy-tabs-demo-html-LC76" class="blob-code blob-code-inner js-file-line"><span class=pl-s> }</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L77" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="77"></td> <td id="file-fancy-tabs-demo-html-LC77" class="blob-code blob-code-inner js-file-line"><span class=pl-s> #panels {</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L78" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="78"></td> <td id="file-fancy-tabs-demo-html-LC78" class="blob-code blob-code-inner js-file-line"><span class=pl-s> box-shadow: 0 2px 2px rgba(0, 0, 0, .3);</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L79" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="79"></td> <td id="file-fancy-tabs-demo-html-LC79" class="blob-code blob-code-inner js-file-line"><span class=pl-s> background: white;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L80" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="80"></td> <td id="file-fancy-tabs-demo-html-LC80" class="blob-code blob-code-inner js-file-line"><span class=pl-s> border-radius: 3px;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L81" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="81"></td> <td id="file-fancy-tabs-demo-html-LC81" class="blob-code blob-code-inner js-file-line"><span class=pl-s> padding: 16px;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L82" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="82"></td> <td id="file-fancy-tabs-demo-html-LC82" class="blob-code blob-code-inner js-file-line"><span class=pl-s> height: 250px;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L83" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="83"></td> <td id="file-fancy-tabs-demo-html-LC83" class="blob-code blob-code-inner js-file-line"><span class=pl-s> overflow: auto;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L84" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="84"></td> <td id="file-fancy-tabs-demo-html-LC84" class="blob-code blob-code-inner js-file-line"><span class=pl-s> }</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L85" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="85"></td> <td id="file-fancy-tabs-demo-html-LC85" class="blob-code blob-code-inner js-file-line"><span class=pl-s> #tabs {</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L86" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="86"></td> <td id="file-fancy-tabs-demo-html-LC86" class="blob-code blob-code-inner js-file-line"><span class=pl-s> display: inline-flex;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L87" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="87"></td> <td id="file-fancy-tabs-demo-html-LC87" class="blob-code blob-code-inner js-file-line"><span class=pl-s> -webkit-user-select: none;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L88" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="88"></td> <td id="file-fancy-tabs-demo-html-LC88" class="blob-code blob-code-inner js-file-line"><span class=pl-s> user-select: none;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L89" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="89"></td> <td id="file-fancy-tabs-demo-html-LC89" class="blob-code blob-code-inner js-file-line"><span class=pl-s> }</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L90" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="90"></td> <td id="file-fancy-tabs-demo-html-LC90" class="blob-code blob-code-inner js-file-line"><span class=pl-s> #tabs slot {</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L91" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="91"></td> <td id="file-fancy-tabs-demo-html-LC91" class="blob-code blob-code-inner js-file-line"><span class=pl-s> display: inline-flex; /* Safari bug. Treats <slot> as a parent */</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L92" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="92"></td> <td id="file-fancy-tabs-demo-html-LC92" class="blob-code blob-code-inner js-file-line"><span class=pl-s> gap: 4px;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L93" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="93"></td> <td id="file-fancy-tabs-demo-html-LC93" class="blob-code blob-code-inner js-file-line"><span class=pl-s> }</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L94" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="94"></td> <td id="file-fancy-tabs-demo-html-LC94" class="blob-code blob-code-inner js-file-line"><span class=pl-s> /* Safari does not support #id prefixes on ::slotted</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L95" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="95"></td> <td id="file-fancy-tabs-demo-html-LC95" class="blob-code blob-code-inner js-file-line"><span class=pl-s> See https://bugs.webkit.org/show_bug.cgi?id=160538 */</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L96" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="96"></td> <td id="file-fancy-tabs-demo-html-LC96" class="blob-code blob-code-inner js-file-line"><span class=pl-s> #tabs ::slotted(*) {</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L97" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="97"></td> <td id="file-fancy-tabs-demo-html-LC97" class="blob-code blob-code-inner js-file-line"><span class=pl-s> font: 400 16px/22px 'Roboto';</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L98" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="98"></td> <td id="file-fancy-tabs-demo-html-LC98" class="blob-code blob-code-inner js-file-line"><span class=pl-s> padding: 16px 8px;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L99" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="99"></td> <td id="file-fancy-tabs-demo-html-LC99" class="blob-code blob-code-inner js-file-line"><span class=pl-s> margin: 0;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L100" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="100"></td> <td id="file-fancy-tabs-demo-html-LC100" class="blob-code blob-code-inner js-file-line"><span class=pl-s> text-align: center;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L101" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="101"></td> <td id="file-fancy-tabs-demo-html-LC101" class="blob-code blob-code-inner js-file-line"><span class=pl-s> width: 100px;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L102" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="102"></td> <td id="file-fancy-tabs-demo-html-LC102" class="blob-code blob-code-inner js-file-line"><span class=pl-s> text-overflow: ellipsis;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L103" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="103"></td> <td id="file-fancy-tabs-demo-html-LC103" class="blob-code blob-code-inner js-file-line"><span class=pl-s> white-space: nowrap;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L104" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="104"></td> <td id="file-fancy-tabs-demo-html-LC104" class="blob-code blob-code-inner js-file-line"><span class=pl-s> overflow: hidden;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L105" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="105"></td> <td id="file-fancy-tabs-demo-html-LC105" class="blob-code blob-code-inner js-file-line"><span class=pl-s> cursor: pointer;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L106" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="106"></td> <td id="file-fancy-tabs-demo-html-LC106" class="blob-code blob-code-inner js-file-line"><span class=pl-s> border-top-left-radius: 3px;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L107" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="107"></td> <td id="file-fancy-tabs-demo-html-LC107" class="blob-code blob-code-inner js-file-line"><span class=pl-s> border-top-right-radius: 3px;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L108" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="108"></td> <td id="file-fancy-tabs-demo-html-LC108" class="blob-code blob-code-inner js-file-line"><span class=pl-s> background: linear-gradient(#fafafa, #eee);</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L109" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="109"></td> <td id="file-fancy-tabs-demo-html-LC109" class="blob-code blob-code-inner js-file-line"><span class=pl-s> border: none; /* if the user users a <button> */</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L110" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="110"></td> <td id="file-fancy-tabs-demo-html-LC110" class="blob-code blob-code-inner js-file-line"><span class=pl-s> }</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L111" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="111"></td> <td id="file-fancy-tabs-demo-html-LC111" class="blob-code blob-code-inner js-file-line"><span class=pl-s> #tabs ::slotted([aria-selected="true"]) {</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L112" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="112"></td> <td id="file-fancy-tabs-demo-html-LC112" class="blob-code blob-code-inner js-file-line"><span class=pl-s> font-weight: 600;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L113" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="113"></td> <td id="file-fancy-tabs-demo-html-LC113" class="blob-code blob-code-inner js-file-line"><span class=pl-s> background: white;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L114" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="114"></td> <td id="file-fancy-tabs-demo-html-LC114" class="blob-code blob-code-inner js-file-line"><span class=pl-s> box-shadow: none;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L115" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="115"></td> <td id="file-fancy-tabs-demo-html-LC115" class="blob-code blob-code-inner js-file-line"><span class=pl-s> }</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L116" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="116"></td> <td id="file-fancy-tabs-demo-html-LC116" class="blob-code blob-code-inner js-file-line"><span class=pl-s> #tabs ::slotted(:focus) {</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L117" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="117"></td> <td id="file-fancy-tabs-demo-html-LC117" class="blob-code blob-code-inner js-file-line"><span class=pl-s> z-index: 1; /* make sure focus ring doesn't get buried */</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L118" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="118"></td> <td id="file-fancy-tabs-demo-html-LC118" class="blob-code blob-code-inner js-file-line"><span class=pl-s> }</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L119" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="119"></td> <td id="file-fancy-tabs-demo-html-LC119" class="blob-code blob-code-inner js-file-line"><span class=pl-s> #panels ::slotted([aria-hidden="true"]) {</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L120" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="120"></td> <td id="file-fancy-tabs-demo-html-LC120" class="blob-code blob-code-inner js-file-line"><span class=pl-s> display: none;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L121" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="121"></td> <td id="file-fancy-tabs-demo-html-LC121" class="blob-code blob-code-inner js-file-line"><span class=pl-s> }</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L122" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="122"></td> <td id="file-fancy-tabs-demo-html-LC122" class="blob-code blob-code-inner js-file-line"><span class=pl-s> </style></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L123" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="123"></td> <td id="file-fancy-tabs-demo-html-LC123" class="blob-code blob-code-inner js-file-line"><span class=pl-s> <div id="tabs"></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L124" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="124"></td> <td id="file-fancy-tabs-demo-html-LC124" class="blob-code blob-code-inner js-file-line"><span class=pl-s> <slot id="tabsSlot" name="title"></slot></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L125" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="125"></td> <td id="file-fancy-tabs-demo-html-LC125" class="blob-code blob-code-inner js-file-line"><span class=pl-s> </div></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L126" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="126"></td> <td id="file-fancy-tabs-demo-html-LC126" class="blob-code blob-code-inner js-file-line"><span class=pl-s> <div id="panels"></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L127" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="127"></td> <td id="file-fancy-tabs-demo-html-LC127" class="blob-code blob-code-inner js-file-line"><span class=pl-s> <slot id="panelsSlot"></slot></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L128" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="128"></td> <td id="file-fancy-tabs-demo-html-LC128" class="blob-code blob-code-inner js-file-line"><span class=pl-s> </div></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L129" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="129"></td> <td id="file-fancy-tabs-demo-html-LC129" class="blob-code blob-code-inner js-file-line"><span class=pl-s> `</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L130" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="130"></td> <td id="file-fancy-tabs-demo-html-LC130" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos>}</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L131" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="131"></td> <td id="file-fancy-tabs-demo-html-LC131" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L132" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="132"></td> <td id="file-fancy-tabs-demo-html-LC132" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>get</span> <span class=pl-en>selected</span><span class=pl-kos>(</span><span class=pl-kos>)</span> <span class=pl-kos>{</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L133" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="133"></td> <td id="file-fancy-tabs-demo-html-LC133" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>return</span> <span class=pl-smi>this</span><span class=pl-kos>.</span>#<span class=pl-c1>selected</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L134" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="134"></td> <td id="file-fancy-tabs-demo-html-LC134" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos>}</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L135" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="135"></td> <td id="file-fancy-tabs-demo-html-LC135" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L136" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="136"></td> <td id="file-fancy-tabs-demo-html-LC136" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>set</span> <span class=pl-en>selected</span><span class=pl-kos>(</span><span class=pl-s1>idx</span><span class=pl-kos>)</span> <span class=pl-kos>{</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L137" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="137"></td> <td id="file-fancy-tabs-demo-html-LC137" class="blob-code blob-code-inner js-file-line"> <span class=pl-smi>this</span><span class=pl-kos>.</span>#<span class=pl-c1>selected</span> <span class=pl-c1>=</span> <span class=pl-s1>idx</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L138" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="138"></td> <td id="file-fancy-tabs-demo-html-LC138" class="blob-code blob-code-inner js-file-line"> <span class=pl-smi>this</span><span class=pl-kos>.</span><span class=pl-en>selectTab</span><span class=pl-kos>(</span><span class=pl-s1>idx</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L139" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="139"></td> <td id="file-fancy-tabs-demo-html-LC139" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L140" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="140"></td> <td id="file-fancy-tabs-demo-html-LC140" class="blob-code blob-code-inner js-file-line"> <span class=pl-c>// Updated the element's selected attribute value when</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L141" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="141"></td> <td id="file-fancy-tabs-demo-html-LC141" class="blob-code blob-code-inner js-file-line"> <span class=pl-c>// backing property changes.</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L142" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="142"></td> <td id="file-fancy-tabs-demo-html-LC142" class="blob-code blob-code-inner js-file-line"> <span class=pl-smi>this</span><span class=pl-kos>.</span><span class=pl-en>setAttribute</span><span class=pl-kos>(</span><span class=pl-s>'selected'</span><span class=pl-kos>,</span> <span class=pl-s1>idx</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L143" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="143"></td> <td id="file-fancy-tabs-demo-html-LC143" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos>}</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L144" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="144"></td> <td id="file-fancy-tabs-demo-html-LC144" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L145" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="145"></td> <td id="file-fancy-tabs-demo-html-LC145" class="blob-code blob-code-inner js-file-line"> <span class=pl-en>connectedCallback</span><span class=pl-kos>(</span><span class=pl-kos>)</span> <span class=pl-kos>{</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L146" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="146"></td> <td id="file-fancy-tabs-demo-html-LC146" class="blob-code blob-code-inner js-file-line"> <span class=pl-smi>this</span><span class=pl-kos>.</span><span class=pl-en>setAttribute</span><span class=pl-kos>(</span><span class=pl-s>'role'</span><span class=pl-kos>,</span> <span class=pl-s>'tablist'</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L147" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="147"></td> <td id="file-fancy-tabs-demo-html-LC147" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L148" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="148"></td> <td id="file-fancy-tabs-demo-html-LC148" class="blob-code blob-code-inner js-file-line"> <span class=pl-smi>this</span><span class=pl-kos>.</span>#<span class=pl-c1>tabsSlot</span> <span class=pl-c1>=</span> <span class=pl-smi>this</span><span class=pl-kos>.</span>#<span class=pl-c1>shadowRoot</span><span class=pl-kos>.</span><span class=pl-en>querySelector</span><span class=pl-kos>(</span><span class=pl-s>'#tabsSlot'</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L149" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="149"></td> <td id="file-fancy-tabs-demo-html-LC149" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>const</span> <span class=pl-s1>panelsSlot</span> <span class=pl-c1>=</span> <span class=pl-smi>this</span><span class=pl-kos>.</span>#<span class=pl-c1>shadowRoot</span><span class=pl-kos>.</span><span class=pl-en>querySelector</span><span class=pl-kos>(</span><span class=pl-s>'#panelsSlot'</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L150" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="150"></td> <td id="file-fancy-tabs-demo-html-LC150" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L151" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="151"></td> <td id="file-fancy-tabs-demo-html-LC151" class="blob-code blob-code-inner js-file-line"> <span class=pl-smi>this</span><span class=pl-kos>.</span><span class=pl-c1>tabs</span> <span class=pl-c1>=</span> <span class=pl-smi>this</span><span class=pl-kos>.</span>#<span class=pl-c1>tabsSlot</span><span class=pl-kos>.</span><span class=pl-en>assignedNodes</span><span class=pl-kos>(</span><span class=pl-kos>{</span> <span class=pl-c1>flatten</span>: <span class=pl-c1>true</span> <span class=pl-kos>}</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L152" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="152"></td> <td id="file-fancy-tabs-demo-html-LC152" class="blob-code blob-code-inner js-file-line"> <span class=pl-smi>this</span><span class=pl-kos>.</span><span class=pl-c1>panels</span> <span class=pl-c1>=</span> <span class=pl-s1>panelsSlot</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L153" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="153"></td> <td id="file-fancy-tabs-demo-html-LC153" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos>.</span><span class=pl-en>assignedNodes</span><span class=pl-kos>(</span><span class=pl-kos>{</span> <span class=pl-c1>flatten</span>: <span class=pl-c1>true</span> <span class=pl-kos>}</span><span class=pl-kos>)</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L154" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="154"></td> <td id="file-fancy-tabs-demo-html-LC154" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos>.</span><span class=pl-en>filter</span><span class=pl-kos>(</span><span class=pl-kos>(</span><span class=pl-s1>el</span><span class=pl-kos>)</span> <span class=pl-c1>=></span> <span class=pl-s1>el</span><span class=pl-kos>.</span><span class=pl-c1>nodeType</span> <span class=pl-c1>===</span> <span class=pl-v>Node</span><span class=pl-kos>.</span><span class=pl-c1>ELEMENT_NODE</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L155" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="155"></td> <td id="file-fancy-tabs-demo-html-LC155" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L156" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="156"></td> <td id="file-fancy-tabs-demo-html-LC156" class="blob-code blob-code-inner js-file-line"> <span class=pl-c>// Add aria role="tabpanel" to each content panel.</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L157" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="157"></td> <td id="file-fancy-tabs-demo-html-LC157" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>for</span> <span class=pl-kos>(</span><span class=pl-k>const</span> <span class=pl-s1>panel</span> <span class=pl-k>of</span> <span class=pl-smi>this</span><span class=pl-kos>.</span><span class=pl-c1>panels</span><span class=pl-kos>)</span> <span class=pl-kos>{</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L158" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="158"></td> <td id="file-fancy-tabs-demo-html-LC158" class="blob-code blob-code-inner js-file-line"> <span class=pl-s1>panel</span><span class=pl-kos>.</span><span class=pl-en>setAttribute</span><span class=pl-kos>(</span><span class=pl-s>'role'</span><span class=pl-kos>,</span> <span class=pl-s>'tabpanel'</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L159" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="159"></td> <td id="file-fancy-tabs-demo-html-LC159" class="blob-code blob-code-inner js-file-line"> <span class=pl-s1>panel</span><span class=pl-kos>.</span><span class=pl-en>setAttribute</span><span class=pl-kos>(</span><span class=pl-s>'tabindex'</span><span class=pl-kos>,</span> <span class=pl-c1>0</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L160" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="160"></td> <td id="file-fancy-tabs-demo-html-LC160" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos>}</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L161" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="161"></td> <td id="file-fancy-tabs-demo-html-LC161" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L162" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="162"></td> <td id="file-fancy-tabs-demo-html-LC162" class="blob-code blob-code-inner js-file-line"> <span class=pl-c>// Referernces to we can remove listeners later.</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L163" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="163"></td> <td id="file-fancy-tabs-demo-html-LC163" class="blob-code blob-code-inner js-file-line"> <span class=pl-smi>this</span><span class=pl-kos>.</span>#<span class=pl-c1>boundOnTitleClick</span> <span class=pl-c1>=</span> <span class=pl-smi>this</span><span class=pl-kos>.</span>#<span class=pl-c1>onTitleClick</span><span class=pl-kos>.</span><span class=pl-en>bind</span><span class=pl-kos>(</span><span class=pl-smi>this</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L164" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="164"></td> <td id="file-fancy-tabs-demo-html-LC164" class="blob-code blob-code-inner js-file-line"> <span class=pl-smi>this</span><span class=pl-kos>.</span>#<span class=pl-c1>boundOnKeyDown</span> <span class=pl-c1>=</span> <span class=pl-smi>this</span><span class=pl-kos>.</span>#<span class=pl-c1>onKeyDown</span><span class=pl-kos>.</span><span class=pl-en>bind</span><span class=pl-kos>(</span><span class=pl-smi>this</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L165" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="165"></td> <td id="file-fancy-tabs-demo-html-LC165" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L166" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="166"></td> <td id="file-fancy-tabs-demo-html-LC166" class="blob-code blob-code-inner js-file-line"> <span class=pl-smi>this</span><span class=pl-kos>.</span>#<span class=pl-c1>tabsSlot</span><span class=pl-kos>.</span><span class=pl-en>addEventListener</span><span class=pl-kos>(</span><span class=pl-s>'click'</span><span class=pl-kos>,</span> <span class=pl-smi>this</span><span class=pl-kos>.</span>#<span class=pl-c1>boundOnTitleClick</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L167" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="167"></td> <td id="file-fancy-tabs-demo-html-LC167" class="blob-code blob-code-inner js-file-line"> <span class=pl-smi>this</span><span class=pl-kos>.</span>#<span class=pl-c1>tabsSlot</span><span class=pl-kos>.</span><span class=pl-en>addEventListener</span><span class=pl-kos>(</span><span class=pl-s>'keydown'</span><span class=pl-kos>,</span> <span class=pl-smi>this</span><span class=pl-kos>.</span>#<span class=pl-c1>boundOnKeyDown</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L168" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="168"></td> <td id="file-fancy-tabs-demo-html-LC168" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L169" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="169"></td> <td id="file-fancy-tabs-demo-html-LC169" class="blob-code blob-code-inner js-file-line"> <span class=pl-smi>this</span><span class=pl-kos>.</span><span class=pl-c1>selected</span> <span class=pl-c1>=</span> <span class=pl-smi>this</span><span class=pl-kos>.</span>#<span class=pl-en>findFirstSelectedTab</span><span class=pl-kos>(</span><span class=pl-kos>)</span> <span class=pl-c1>||</span> <span class=pl-c1>0</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L170" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="170"></td> <td id="file-fancy-tabs-demo-html-LC170" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos>}</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L171" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="171"></td> <td id="file-fancy-tabs-demo-html-LC171" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L172" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="172"></td> <td id="file-fancy-tabs-demo-html-LC172" class="blob-code blob-code-inner js-file-line"> <span class=pl-en>disconnectedCallback</span><span class=pl-kos>(</span><span class=pl-kos>)</span> <span class=pl-kos>{</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L173" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="173"></td> <td id="file-fancy-tabs-demo-html-LC173" class="blob-code blob-code-inner js-file-line"> <span class=pl-smi>this</span><span class=pl-kos>.</span>#<span class=pl-c1>tabsSlot</span><span class=pl-kos>.</span><span class=pl-en>removeEventListener</span><span class=pl-kos>(</span><span class=pl-s>'click'</span><span class=pl-kos>,</span> <span class=pl-smi>this</span><span class=pl-kos>.</span>#<span class=pl-c1>boundOnTitleClick</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L174" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="174"></td> <td id="file-fancy-tabs-demo-html-LC174" class="blob-code blob-code-inner js-file-line"> <span class=pl-smi>this</span><span class=pl-kos>.</span>#<span class=pl-c1>tabsSlot</span><span class=pl-kos>.</span><span class=pl-en>removeEventListener</span><span class=pl-kos>(</span><span class=pl-s>'keydown'</span><span class=pl-kos>,</span> <span class=pl-smi>this</span><span class=pl-kos>.</span>#<span class=pl-c1>boundOnKeyDown</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L175" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="175"></td> <td id="file-fancy-tabs-demo-html-LC175" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos>}</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L176" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="176"></td> <td id="file-fancy-tabs-demo-html-LC176" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L177" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="177"></td> <td id="file-fancy-tabs-demo-html-LC177" class="blob-code blob-code-inner js-file-line"> #<span class=pl-en>onTitleClick</span><span class=pl-kos>(</span><span class=pl-s1>e</span><span class=pl-kos>)</span> <span class=pl-kos>{</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L178" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="178"></td> <td id="file-fancy-tabs-demo-html-LC178" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>if</span> <span class=pl-kos>(</span><span class=pl-s1>e</span><span class=pl-kos>.</span><span class=pl-c1>target</span><span class=pl-kos>.</span><span class=pl-c1>slot</span> <span class=pl-c1>===</span> <span class=pl-s>'title'</span><span class=pl-kos>)</span> <span class=pl-kos>{</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L179" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="179"></td> <td id="file-fancy-tabs-demo-html-LC179" class="blob-code blob-code-inner js-file-line"> <span class=pl-smi>this</span><span class=pl-kos>.</span><span class=pl-c1>selected</span> <span class=pl-c1>=</span> <span class=pl-smi>this</span><span class=pl-kos>.</span><span class=pl-c1>tabs</span><span class=pl-kos>.</span><span class=pl-en>indexOf</span><span class=pl-kos>(</span><span class=pl-s1>e</span><span class=pl-kos>.</span><span class=pl-c1>target</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L180" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="180"></td> <td id="file-fancy-tabs-demo-html-LC180" class="blob-code blob-code-inner js-file-line"> <span class=pl-s1>e</span><span class=pl-kos>.</span><span class=pl-c1>target</span><span class=pl-kos>.</span><span class=pl-en>focus</span><span class=pl-kos>(</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L181" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="181"></td> <td id="file-fancy-tabs-demo-html-LC181" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos>}</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L182" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="182"></td> <td id="file-fancy-tabs-demo-html-LC182" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos>}</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L183" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="183"></td> <td id="file-fancy-tabs-demo-html-LC183" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L184" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="184"></td> <td id="file-fancy-tabs-demo-html-LC184" class="blob-code blob-code-inner js-file-line"> #<span class=pl-en>onKeyDown</span><span class=pl-kos>(</span><span class=pl-s1>e</span><span class=pl-kos>)</span> <span class=pl-kos>{</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L185" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="185"></td> <td id="file-fancy-tabs-demo-html-LC185" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>switch</span> <span class=pl-kos>(</span><span class=pl-s1>e</span><span class=pl-kos>.</span><span class=pl-c1>code</span><span class=pl-kos>)</span> <span class=pl-kos>{</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L186" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="186"></td> <td id="file-fancy-tabs-demo-html-LC186" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>case</span> <span class=pl-s>'ArrowUp'</span>:</td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L187" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="187"></td> <td id="file-fancy-tabs-demo-html-LC187" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>case</span> <span class=pl-s>'ArrowLeft'</span>:</td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L188" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="188"></td> <td id="file-fancy-tabs-demo-html-LC188" class="blob-code blob-code-inner js-file-line"> <span class=pl-s1>e</span><span class=pl-kos>.</span><span class=pl-en>preventDefault</span><span class=pl-kos>(</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L189" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="189"></td> <td id="file-fancy-tabs-demo-html-LC189" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>var</span> <span class=pl-s1>idx</span> <span class=pl-c1>=</span> <span class=pl-smi>this</span><span class=pl-kos>.</span><span class=pl-c1>selected</span> <span class=pl-c1>-</span> <span class=pl-c1>1</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L190" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="190"></td> <td id="file-fancy-tabs-demo-html-LC190" class="blob-code blob-code-inner js-file-line"> <span class=pl-s1>idx</span> <span class=pl-c1>=</span> <span class=pl-s1>idx</span> <span class=pl-c1><</span> <span class=pl-c1>0</span> ? <span class=pl-smi>this</span><span class=pl-kos>.</span><span class=pl-c1>tabs</span><span class=pl-kos>.</span><span class=pl-c1>length</span> <span class=pl-c1>-</span> <span class=pl-c1>1</span> : <span class=pl-s1>idx</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L191" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="191"></td> <td id="file-fancy-tabs-demo-html-LC191" class="blob-code blob-code-inner js-file-line"> <span class=pl-smi>this</span><span class=pl-kos>.</span><span class=pl-c1>tabs</span><span class=pl-kos>[</span><span class=pl-s1>idx</span><span class=pl-kos>]</span><span class=pl-kos>.</span><span class=pl-en>click</span><span class=pl-kos>(</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L192" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="192"></td> <td id="file-fancy-tabs-demo-html-LC192" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>break</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L193" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="193"></td> <td id="file-fancy-tabs-demo-html-LC193" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>case</span> <span class=pl-s>'ArrowDown'</span>:</td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L194" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="194"></td> <td id="file-fancy-tabs-demo-html-LC194" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>case</span> <span class=pl-s>'ArrowRight'</span>:</td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L195" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="195"></td> <td id="file-fancy-tabs-demo-html-LC195" class="blob-code blob-code-inner js-file-line"> <span class=pl-s1>e</span><span class=pl-kos>.</span><span class=pl-en>preventDefault</span><span class=pl-kos>(</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L196" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="196"></td> <td id="file-fancy-tabs-demo-html-LC196" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>var</span> <span class=pl-s1>idx</span> <span class=pl-c1>=</span> <span class=pl-smi>this</span><span class=pl-kos>.</span><span class=pl-c1>selected</span> <span class=pl-c1>+</span> <span class=pl-c1>1</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L197" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="197"></td> <td id="file-fancy-tabs-demo-html-LC197" class="blob-code blob-code-inner js-file-line"> <span class=pl-smi>this</span><span class=pl-kos>.</span><span class=pl-c1>tabs</span><span class=pl-kos>[</span><span class=pl-s1>idx</span> <span class=pl-c1>%</span> <span class=pl-smi>this</span><span class=pl-kos>.</span><span class=pl-c1>tabs</span><span class=pl-kos>.</span><span class=pl-c1>length</span><span class=pl-kos>]</span><span class=pl-kos>.</span><span class=pl-en>click</span><span class=pl-kos>(</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L198" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="198"></td> <td id="file-fancy-tabs-demo-html-LC198" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>break</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L199" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="199"></td> <td id="file-fancy-tabs-demo-html-LC199" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>default</span>:</td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L200" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="200"></td> <td id="file-fancy-tabs-demo-html-LC200" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>break</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L201" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="201"></td> <td id="file-fancy-tabs-demo-html-LC201" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos>}</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L202" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="202"></td> <td id="file-fancy-tabs-demo-html-LC202" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos>}</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L203" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="203"></td> <td id="file-fancy-tabs-demo-html-LC203" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L204" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="204"></td> <td id="file-fancy-tabs-demo-html-LC204" class="blob-code blob-code-inner js-file-line"> #<span class=pl-en>findFirstSelectedTab</span><span class=pl-kos>(</span><span class=pl-kos>)</span> <span class=pl-kos>{</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L205" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="205"></td> <td id="file-fancy-tabs-demo-html-LC205" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>let</span> <span class=pl-s1>selectedIdx</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L206" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="206"></td> <td id="file-fancy-tabs-demo-html-LC206" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>for</span> <span class=pl-kos>(</span><span class=pl-k>let</span> <span class=pl-kos>[</span><span class=pl-s1>i</span><span class=pl-kos>,</span> <span class=pl-s1>tab</span><span class=pl-kos>]</span> <span class=pl-k>of</span> <span class=pl-smi>this</span><span class=pl-kos>.</span><span class=pl-c1>tabs</span><span class=pl-kos>.</span><span class=pl-en>entries</span><span class=pl-kos>(</span><span class=pl-kos>)</span><span class=pl-kos>)</span> <span class=pl-kos>{</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L207" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="207"></td> <td id="file-fancy-tabs-demo-html-LC207" class="blob-code blob-code-inner js-file-line"> <span class=pl-s1>tab</span><span class=pl-kos>.</span><span class=pl-en>setAttribute</span><span class=pl-kos>(</span><span class=pl-s>'role'</span><span class=pl-kos>,</span> <span class=pl-s>'tab'</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L208" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="208"></td> <td id="file-fancy-tabs-demo-html-LC208" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L209" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="209"></td> <td id="file-fancy-tabs-demo-html-LC209" class="blob-code blob-code-inner js-file-line"> <span class=pl-c>// Allow users to declaratively select a tab</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L210" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="210"></td> <td id="file-fancy-tabs-demo-html-LC210" class="blob-code blob-code-inner js-file-line"> <span class=pl-c>// Highlight last tab which has the selected attribute.</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L211" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="211"></td> <td id="file-fancy-tabs-demo-html-LC211" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>if</span> <span class=pl-kos>(</span><span class=pl-s1>tab</span><span class=pl-kos>.</span><span class=pl-en>hasAttribute</span><span class=pl-kos>(</span><span class=pl-s>'selected'</span><span class=pl-kos>)</span><span class=pl-kos>)</span> <span class=pl-kos>{</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L212" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="212"></td> <td id="file-fancy-tabs-demo-html-LC212" class="blob-code blob-code-inner js-file-line"> <span class=pl-s1>selectedIdx</span> <span class=pl-c1>=</span> <span class=pl-s1>i</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L213" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="213"></td> <td id="file-fancy-tabs-demo-html-LC213" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos>}</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L214" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="214"></td> <td id="file-fancy-tabs-demo-html-LC214" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos>}</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L215" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="215"></td> <td id="file-fancy-tabs-demo-html-LC215" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>return</span> <span class=pl-s1>selectedIdx</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L216" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="216"></td> <td id="file-fancy-tabs-demo-html-LC216" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos>}</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L217" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="217"></td> <td id="file-fancy-tabs-demo-html-LC217" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L218" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="218"></td> <td id="file-fancy-tabs-demo-html-LC218" class="blob-code blob-code-inner js-file-line"> <span class=pl-en>selectTab</span><span class=pl-kos>(</span><span class=pl-s1>idx</span> <span class=pl-c1>=</span> <span class=pl-c1>null</span><span class=pl-kos>)</span> <span class=pl-kos>{</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L219" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="219"></td> <td id="file-fancy-tabs-demo-html-LC219" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>for</span> <span class=pl-kos>(</span><span class=pl-k>let</span> <span class=pl-kos>[</span><span class=pl-s1>i</span><span class=pl-kos>,</span> <span class=pl-s1>tab</span><span class=pl-kos>]</span> <span class=pl-k>of</span> <span class=pl-smi>this</span><span class=pl-kos>.</span><span class=pl-c1>tabs</span><span class=pl-kos>.</span><span class=pl-en>entries</span><span class=pl-kos>(</span><span class=pl-kos>)</span><span class=pl-kos>)</span> <span class=pl-kos>{</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L220" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="220"></td> <td id="file-fancy-tabs-demo-html-LC220" class="blob-code blob-code-inner js-file-line"> <span class=pl-k>const</span> <span class=pl-s1>select</span> <span class=pl-c1>=</span> <span class=pl-s1>i</span> <span class=pl-c1>===</span> <span class=pl-s1>idx</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L221" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="221"></td> <td id="file-fancy-tabs-demo-html-LC221" class="blob-code blob-code-inner js-file-line"> <span class=pl-s1>tab</span><span class=pl-kos>.</span><span class=pl-en>setAttribute</span><span class=pl-kos>(</span><span class=pl-s>'tabindex'</span><span class=pl-kos>,</span> <span class=pl-s1>select</span> ? <span class=pl-c1>0</span> : <span class=pl-c1>-</span><span class=pl-c1>1</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L222" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="222"></td> <td id="file-fancy-tabs-demo-html-LC222" class="blob-code blob-code-inner js-file-line"> <span class=pl-s1>tab</span><span class=pl-kos>.</span><span class=pl-en>setAttribute</span><span class=pl-kos>(</span><span class=pl-s>'aria-selected'</span><span class=pl-kos>,</span> <span class=pl-s1>select</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L223" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="223"></td> <td id="file-fancy-tabs-demo-html-LC223" class="blob-code blob-code-inner js-file-line"> <span class=pl-smi>this</span><span class=pl-kos>.</span><span class=pl-c1>panels</span><span class=pl-kos>[</span><span class=pl-s1>i</span><span class=pl-kos>]</span><span class=pl-kos>.</span><span class=pl-en>setAttribute</span><span class=pl-kos>(</span><span class=pl-s>'aria-hidden'</span><span class=pl-kos>,</span> <span class=pl-c1>!</span><span class=pl-s1>select</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L224" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="224"></td> <td id="file-fancy-tabs-demo-html-LC224" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos>}</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L225" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="225"></td> <td id="file-fancy-tabs-demo-html-LC225" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos>}</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L226" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="226"></td> <td id="file-fancy-tabs-demo-html-LC226" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos>}</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L227" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="227"></td> <td id="file-fancy-tabs-demo-html-LC227" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L228" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="228"></td> <td id="file-fancy-tabs-demo-html-LC228" class="blob-code blob-code-inner js-file-line"> <span class=pl-kos>}</span><span class=pl-kos>)</span><span class=pl-kos>(</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L229" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="229"></td> <td id="file-fancy-tabs-demo-html-LC229" class="blob-code blob-code-inner js-file-line"><span class=pl-kos></</span><span class=pl-ent>script</span><span class=pl-kos>></span></td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L230" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="230"></td> <td id="file-fancy-tabs-demo-html-LC230" class="blob-code blob-code-inner js-file-line"> </td> </tr> <tr> <td id="file-fancy-tabs-demo-html-L231" class="blob-num js-line-number js-code-nav-line-number js-blob-rnum" data-line-number="231"></td> <td id="file-fancy-tabs-demo-html-LC231" class="blob-code blob-code-inner js-file-line"><span class=pl-kos><</span><span class=pl-ent>div</span> <span class=pl-c1>id</span>="<span class=pl-s>app</span>"<span class=pl-kos>></span><span class=pl-kos></</span><span class=pl-ent>div</span><span class=pl-kos>></span></td> </tr> </table> </div> </div> </div> </div> <a name="comments"></a> <div class="js-quote-selection-container" data-quote-markdown=".js-comment-body"> <div class="js-discussion " > <div class="ml-md-6 pl-md-3 ml-0 pl-0"> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/itsMattShull/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/itsMattShull"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/5685667?s=80&v=4" width="40" height="40" alt="@itsMattShull" /></a> </div> <div id="gistcomment-1888335" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-1888335-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/itsMattShull/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/itsMattShull">itsMattShull</a> </strong> commented <a href="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b?permalink_comment_id=1888335#gistcomment-1888335" id="gistcomment-1888335-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2016-10-02T23:59:23Z" class="no-wrap">Oct 2, 2016</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">Is the polyfill at the top for ShadowDOM v1 and Custom Elements v1?</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/comments/1888335" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="-WFb21dAUkhwo7HFVDkB4587a4ecO1PH1P1Y-xWCZsWwoJGfiKc7QWdWlARtGfnQoWjIku4rN0gn9MaMpa3UFA" autocomplete="off" /> <include-fragment loading="lazy" src="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/comments/1888335/edit_form?textarea_id=gistcomment-1888335-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/mkozhukharenko/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mkozhukharenko"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/9365923?s=80&v=4" width="40" height="40" alt="@mkozhukharenko" /></a> </div> <div id="gistcomment-1889994" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-1889994-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/mkozhukharenko/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mkozhukharenko">mkozhukharenko</a> </strong> commented <a href="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b?permalink_comment_id=1889994#gistcomment-1889994" id="gistcomment-1889994-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2016-10-04T21:30:02Z" class="no-wrap">Oct 4, 2016</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">yep</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/comments/1889994" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="4axSXvuEUd1iO9Kr3yqF2MDTP8rt6FNmM82grPJgCQThejho37OJNWI7p8ICoCIfQtoemGKwCLx56OxWaEaDZg" autocomplete="off" /> <include-fragment loading="lazy" src="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/comments/1889994/edit_form?textarea_id=gistcomment-1889994-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/ephemere000/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/ephemere000"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/22978977?s=80&v=4" width="40" height="40" alt="@ephemere000" /></a> </div> <div id="gistcomment-1903034" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-1903034-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/ephemere000/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/ephemere000">ephemere000</a> </strong> commented <a href="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b?permalink_comment_id=1903034#gistcomment-1903034" id="gistcomment-1903034-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2016-10-21T10:34:53Z" class="no-wrap">Oct 21, 2016</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">I could not make my custom element container work until I found your example. Chromium bug report: Issue 658119 (code provided).</p> <p dir="auto">In my case both the container and the children are custom elements. My container would only work if the children were native elements. When I nested custom elements, the container would not see it's children in connectedCallback (not created yet).</p> <p dir="auto">I put my custom children in your container and it worked! I finally realized that you instantiate the container and children BEFORE you define them (upgrade). I had done the reverse and included the definitions at the beginning of the page, like we always do for definitions: styles, scripts,.. It was working until I encountered nested custom elements.</p> <p dir="auto">First, I find odd that the custom elements children creation sequence is different from a parent node's perspective when compared to native elements. The children are already created in connectedCallback for native elements, not for custom ones. Second, to make my code work, I have to put the definitions' inclusion at the END of the HTML file!</p> <p dir="auto">This is a schizophrenic behavior from a coders' perspective, two different creation sequence schemes and sets of rules. It will become a nightmare very quickly and is not maintainable.</p> <p dir="auto">Is my understanding right (I deeply hope not), or I'm missing something fundamental here?</p> <p dir="auto">Thanks</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/comments/1903034" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="FawGh5xRFtdA7zQe3col1t1v2conwiR4MWcRHVWg7Qz0WvK63O2mXrx8RO1ArJi4tStQgjrgdfxw9nUvYS5ljg" autocomplete="off" /> <include-fragment loading="lazy" src="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/comments/1903034/edit_form?textarea_id=gistcomment-1903034-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/ephemere000/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/ephemere000"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/22978977?s=80&v=4" width="40" height="40" alt="@ephemere000" /></a> </div> <div id="gistcomment-1905406" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-1905406-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/ephemere000/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/ephemere000">ephemere000</a> </strong> commented <a href="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b?permalink_comment_id=1905406#gistcomment-1905406" id="gistcomment-1905406-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2016-10-25T04:22:00Z" class="no-wrap">Oct 25, 2016</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDExOkdpc3RDb21tZW50MmQyYmIwY2RlYzNmMmExNmNmNTE5ZGJhYTc5MWNlMWI6MTkwNTQwNg==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">I got a reply from dominicc from the Chromium group: "I'm closing this as WontFix because I think this is working as intended and per the spec, even though the behavior is surprising."</p> <p dir="auto">Meaning: unintuitive, not clear, not working like native elements and HTML do in general, but what the heck, it is conform to the specs if we look deep into it, so we won't fix and live with it!</p> <p dir="auto">The problem was already forseen in the specs design but was dismissed. "Some contributors to the spec considered a callback for "end tag parsed" which would be a good time to inspect children if you were doing "one shot" processing of children, however IIRC the decision was to not add this callback yet."</p> <p dir="auto">Acutally, the proposed way is as follows: "If you want a custom element's behavior to depend on its children you should use a MutationObserver or have the children coordinate with the container through events/methods/etc."</p> <p dir="auto">The second solution is obviously not viable. The children would have to coordonate with their parents though KNOWN events/methods, meaning that the coder that creates the container MUST ALSO create the children so they can register to or call their container using a KNOWN PUBLISHED interface. Anyone creating a container like your Fancy Tab would also have to create all of the custom element children that it may potentially encounter. If not, even worse, each creator in the community will come up with their own event/methods that all the other custom elements in the world would have to know about and call. Impossible, a no brainer.</p> <p dir="auto">Adieu! the ability to create custom containers and elements that can be shared in the community and that are agostic of each other, that behave like native elements. This solution reminds us that a clear interface should be defined between parent and child nodes, a standardized one. I wonder how they made it work for native ones under the hood. We don't have this option with custom elements coming from different sources and libraries.</p> <p dir="auto">The second solution, MutationObserver, would be good for a dynamic container where chidren might come and go. A bit overkilled for stable one shot contents containers (for intance GUI). Certainly not necessary if the children are native elements. They use a different logic created by the vendor. OUCH!</p> <p dir="auto">One of the 4 conerstones of Webcomponents is the Import mechanism. Some are now looking at Modules instead. All the same. A way to include FIRST the custom elements definitions and then use them in the page. That Import WILL be placed at the beginning of the document, not at the end like the definitions in your example.</p> <p dir="auto">I appreciate your example, it made me realize it is pretty naïve (with all due respects, no insult intended and I did it like you intitially), but not usable as a standard example of how to implement an actual custom container. Yours works because of a "hack", an upgrade of the custom elements by including the definitions at the end of the document when everything is already created, which is not the way (and was never the way) the coders intended to include their definitions, through imports or modules at the BEGINING of the document.</p> <p dir="auto">Since compostion is a major part of WebComponents and HTML, actually, the whole DOM is about nodes withing nodes contained and layed out within other nodes, the current specs are incomplete and unusable. By importing custom elements at the begining of the document, only native element children are accessible to their parents through some magic implemented by the vendor, creating the children before the parent's callback is invoked. Custom children don't follow this rule. Sad. :(</p> <p dir="auto">I doubt anything will be done about it since the Chronium group dismissed it and said "the behavior is surprising" but well, conforms to the [inadequate] spec. So, live with it!</p> <p dir="auto">Hopefully, another group will adress this issue. I understand now why Firefox and other vendors are hesitating to implement any of this at the moment. They are waiting for this kind of feedback that they claim they won't dismiss.</p> <p dir="auto">Respectfully</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/comments/1905406" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="0_KqPZcH1d2zpbHtdXnADiZLsEPiDbFMZVXo0BiA_v5iEnzWS_Kmk0Nbny6g-sLgsCEc2UBO6EnsOaMzdwyWjQ" autocomplete="off" /> <include-fragment loading="lazy" src="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/comments/1905406/edit_form?textarea_id=gistcomment-1905406-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/httpstersk/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/httpstersk"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/6890321?s=80&v=4" width="40" height="40" alt="@httpstersk" /></a> </div> <div id="gistcomment-1910666" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-1910666-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/httpstersk/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/httpstersk">httpstersk</a> </strong> commented <a href="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b?permalink_comment_id=1910666#gistcomment-1910666" id="gistcomment-1910666-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2016-10-31T20:46:27Z" class="no-wrap">Oct 31, 2016</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDExOkdpc3RDb21tZW50MmQyYmIwY2RlYzNmMmExNmNmNTE5ZGJhYTc5MWNlMWI6MTkxMDY2Ng==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">Hey Eric.</p> <p dir="auto">It seems <code class="notranslate">::slotted</code> + <code class="notranslate">::before</code> pseudo selectors doesn't play nicely together. CSS ignores whole definition <code class="notranslate">#tabs ::slotted(*)::before { }</code><br> <a href="https://jsbin.com/gohezulama/4/edit?html,js,output" rel="nofollow">https://jsbin.com/gohezulama/4/edit?html,js,output</a></p> <p dir="auto">Is it a bug or did I do something wrong?</p> <p dir="auto">Thank you.</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/comments/1910666" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="yxSB0vZz8o87fJS1_fRyqJv8o6Zkj94R1HE3FXapxz4Puttbhkz468MyqhlzTCbSKTgUs9BT1KInf2CAqf132Q" autocomplete="off" /> <include-fragment loading="lazy" src="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/comments/1910666/edit_form?textarea_id=gistcomment-1910666-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/amirulislam862/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/amirulislam862"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/37384621?s=80&v=4" width="40" height="40" alt="@amirulislam862" /></a> </div> <div id="gistcomment-2380852" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2380852-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/amirulislam862/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/amirulislam862">amirulislam862</a> </strong> commented <a href="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b?permalink_comment_id=2380852#gistcomment-2380852" id="gistcomment-2380852-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-03-14T20:56:59Z" class="no-wrap">Mar 14, 2018</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDExOkdpc3RDb21tZW50MmQyYmIwY2RlYzNmMmExNmNmNTE5ZGJhYTc5MWNlMWI6MjM4MDg1Mg==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">amirulislam862</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/comments/2380852" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="8Lxk2VEpH-OLnqjWOpJaYZHwDeeYXf7j6X0NLer3arAig3hAIoEP5uAb3vKNTOjjkXWxKIJV5S5WwNYnL7NwNg" autocomplete="off" /> <include-fragment loading="lazy" src="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/comments/2380852/edit_form?textarea_id=gistcomment-2380852-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/noncototient/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/noncototient"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/17841428?s=80&v=4" width="40" height="40" alt="@noncototient" /></a> </div> <div id="gistcomment-2700444" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2700444-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/noncototient/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/noncototient">noncototient</a> </strong> commented <a href="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b?permalink_comment_id=2700444#gistcomment-2700444" id="gistcomment-2700444-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2018-09-07T11:30:07Z" class="no-wrap">Sep 7, 2018</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto"><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="158002910" data-permission-text="Title is private" data-url="https://github.com/webcomponents/webcomponentsjs/issues/548" data-hovercard-type="issue" data-hovercard-url="/webcomponents/webcomponentsjs/issues/548/hovercard" href="https://github.com/webcomponents/webcomponentsjs/issues/548">webcomponents/webcomponentsjs#548</a></p> <p dir="auto">This appears to be fixed now, so the check on line 29 can be removed</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/comments/2700444" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="K1hBuwqqsNQQJiUzWNGpKFSr9aFQ3nvZPlrP7L_TdyuJiUi7UaJ0u1l37koRatYaUp0IMxkk9JMixpmPsvMsOQ" autocomplete="off" /> <include-fragment loading="lazy" src="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/comments/2700444/edit_form?textarea_id=gistcomment-2700444-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/akanshgulati/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/akanshgulati"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/5287100?s=80&v=4" width="40" height="40" alt="@akanshgulati" /></a> </div> <div id="gistcomment-2924802" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-2924802-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/akanshgulati/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/akanshgulati">akanshgulati</a> </strong> commented <a href="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b?permalink_comment_id=2924802#gistcomment-2924802" id="gistcomment-2924802-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2019-05-23T12:23:23Z" class="no-wrap">May 23, 2019</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">Typos I think</p> <ol dir="auto"> <li><a href="https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b#file-fancy-tabs-demo-html-L55">https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b#file-fancy-tabs-demo-html-L55</a> "instead of button" should be there.</li> </ol> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/comments/2924802" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="rwxt9T-kdi42fSafBMNZa43Zb_udE2ZAi-9f6_NojS6ymgw_v5PFp4cWhHuiJ6D2coBv45YJ26ny6_fxihIN2g" autocomplete="off" /> <include-fragment loading="lazy" src="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/comments/2924802/edit_form?textarea_id=gistcomment-2924802-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/WinterSilence/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/WinterSilence"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/3521094?s=80&v=4" width="40" height="40" alt="@WinterSilence" /></a> </div> <div id="gistcomment-3651860" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-3651860-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/WinterSilence/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/WinterSilence">WinterSilence</a> </strong> commented <a href="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b?permalink_comment_id=3651860#gistcomment-3651860" id="gistcomment-3651860-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2021-03-03T08:18:16Z" class="no-wrap">Mar 3, 2021</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <blockquote> <p dir="auto"><code class="notranslate"><!-- Using <a> instead of h2 still works! --></code></p> </blockquote> <p dir="auto">not <code class="notranslate">h2</code> - <code class="notranslate">button</code></p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/comments/3651860" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="OdvtvILLrdwCaaP37juxvB955sxRtC0WDRzl7NqSBiNB9eV_MJP9dY72d8uKzQu_SbEMxLmwrF9DOUrMt5UfnA" autocomplete="off" /> <include-fragment loading="lazy" src="/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/comments/3651860/edit_form?textarea_id=gistcomment-3651860-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <!-- Rendered timeline since 2024-10-30 07:48:19 --> <div id="partial-timeline-marker" class="js-timeline-marker js-updatable-content" data-last-modified="Wed, 30 Oct 2024 14:48:19 GMT" > </div> </div> <div class="discussion-timeline-actions"> <div data-view-component="true" class="flash flash-warn mt-3"> <a rel="nofollow" class="btn btn-primary" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"signed out comment","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b","user_id":null}}" data-hydro-click-hmac="baeab08c63d50d5752e96d782559a84758e4f9e9940bd62ad056d9bb4bd284ed" href="/join?source=comment-gist">Sign up for free</a> <strong>to join this conversation on GitHub</strong>. Already have an account? <a rel="nofollow" class="Link--inTextBlock" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"signed out comment","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b","user_id":null}}" data-hydro-click-hmac="fd84ee9bd8e2518497f7ece33592d985de8310c93fe7f4e6f3942c55a5f2a6cf" data-test-selector="comments-sign-in-link" href="/login?return_to=https%3A%2F%2Fgist.github.com%2Febidel%2F2d2bb0cdec3f2a16cf519dbaa791ce1b">Sign in to comment</a> </div> </div> </div> </div> </div> </div> </div><!-- /.container --> </main> </div> </div> <footer class="footer pt-8 pb-6 f6 color-fg-muted p-responsive" role="contentinfo" > <h2 class='sr-only'>Footer</h2> <div class="d-flex flex-justify-center flex-items-center flex-column-reverse flex-lg-row flex-wrap flex-lg-nowrap"> <div class="d-flex flex-items-center flex-shrink-0 mx-2"> <a aria-label="Homepage" title="GitHub" class="footer-octicon mr-2" href="https://github.com"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-mark-github"> <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path> </svg> </a> <span> © 2024 GitHub, Inc. </span> </div> <nav aria-label="Footer"> <h3 class="sr-only" id="sr-footer-heading">Footer navigation</h3> <ul class="list-style-none d-flex flex-justify-center flex-wrap mb-2 mb-lg-0" aria-labelledby="sr-footer-heading"> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to Terms","label":"text:terms"}" href="https://docs.github.com/site-policy/github-terms/github-terms-of-service" data-view-component="true" class="Link--secondary Link">Terms</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to privacy","label":"text:privacy"}" href="https://docs.github.com/site-policy/privacy-policies/github-privacy-statement" data-view-component="true" class="Link--secondary Link">Privacy</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to security","label":"text:security"}" href="https://github.com/security" data-view-component="true" class="Link--secondary Link">Security</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to status","label":"text:status"}" href="https://www.githubstatus.com/" data-view-component="true" class="Link--secondary Link">Status</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to docs","label":"text:docs"}" href="https://docs.github.com/" data-view-component="true" class="Link--secondary Link">Docs</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to contact","label":"text:contact"}" href="https://support.github.com?tags=dotcom-footer" data-view-component="true" class="Link--secondary Link">Contact</a> </li> <li class="mx-2" > <cookie-consent-link> <button type="button" class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent" data-action="click:cookie-consent-link#showConsentManagement" data-analytics-event="{"location":"footer","action":"cookies","context":"subfooter","tag":"link","label":"cookies_link_subfooter_footer"}" > Manage cookies </button> </cookie-consent-link> </li> <li class="mx-2"> <cookie-consent-link> <button type="button" class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent" data-action="click:cookie-consent-link#showConsentManagement" data-analytics-event="{"location":"footer","action":"dont_share_info","context":"subfooter","tag":"link","label":"dont_share_info_link_subfooter_footer"}" > Do not share my personal information </button> </cookie-consent-link> </li> </ul> </nav> </div> </footer> <ghcc-consent id="ghcc" class="position-fixed bottom-0 left-0" style="z-index: 999999" data-initial-cookie-consent-allowed="" data-cookie-consent-required="false"></ghcc-consent> <div id="ajax-error-message" class="ajax-error-message flash flash-error" hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <button type="button" class="flash-close js-ajax-error-dismiss" aria-label="Dismiss error"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> You can’t perform that action at this time. </div> <template id="site-details-dialog"> <details class="details-reset details-overlay details-overlay-dark lh-default color-fg-default hx_rsm" open> <summary role="button" aria-label="Close dialog"></summary> <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast hx_rsm-dialog hx_rsm-modal"> <button class="Box-btn-octicon m-0 btn-octicon position-absolute right-0 top-0" type="button" aria-label="Close dialog" data-close-dialog> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> <div class="octocat-spinner my-6 js-details-dialog-spinner"></div> </details-dialog> </details> </template> <div class="Popover js-hovercard-content position-absolute" style="display: none; outline: none;"> <div class="Popover-message Popover-message--bottom-left Popover-message--large Box color-shadow-large" style="width:360px;"> </div> </div> <template id="snippet-clipboard-copy-button"> <div class="zeroclipboard-container position-absolute right-0 top-0"> <clipboard-copy aria-label="Copy" class="ClipboardButton btn js-clipboard-copy m-2 p-0" data-copy-feedback="Copied!" data-tooltip-direction="w"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon m-2"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none m-2"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> </div> </template> <template id="snippet-clipboard-copy-button-unpositioned"> <div class="zeroclipboard-container"> <clipboard-copy aria-label="Copy" class="ClipboardButton btn btn-invisible js-clipboard-copy m-2 p-0 d-flex flex-justify-center flex-items-center" data-copy-feedback="Copied!" data-tooltip-direction="w"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> </div> </template> </div> <div id="js-global-screen-reader-notice" class="sr-only mt-n1" aria-live="polite" aria-atomic="true" ></div> <div id="js-global-screen-reader-notice-assertive" class="sr-only mt-n1" aria-live="assertive" aria-atomic="true"></div> </body> </html>