shadow DOM demo areas

This commit is contained in:
Heydon Pickering 2017-06-20 16:53:54 +08:00
parent 46fe8d2a3a
commit 69aea402d1
14 changed files with 215 additions and 1 deletions

View File

@ -0,0 +1,11 @@
+++
title = "Page region navigation landmark"
+++
<p>Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. <strong>Donec a congue leo. </strong></p>
{{% principles include="add value" %}}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. </p>
{{% wcag include="1.1.1" %}}

View File

@ -19,7 +19,13 @@ tags = ["animated", "interactive"]
}
{{</codeBlock>}}
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac sodales <code>.generate()</code> magna. Aliquam tincidunt velit sit amet <a href='#'>ante hendrerit</a> tempus. Donec et nisi dictum felis sollicitudin congue. Nulla vel magna sit &mdash; amet dui lobortis commodo &mdash; vitae vel nulla. Nulla lobortis tempus commodo. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac sodales <code>.generate()</code> magna. Aliquam tincidunt velit sit amet <a href='#'>ante hendrerit</a> tempus. Donec et nisi dictum felis sollicitudin congue.</p>
{{<demo>}}
{{</demo>}}
<p>Nulla vel magna sit &mdash; amet dui lobortis commodo &mdash; vitae vel nulla. Nulla lobortis tempus commodo. </p>
{{% ticks %}}
* Something good

View File

@ -0,0 +1,8 @@
<li>
<h2>
<a href="{{ .Permalink }}">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
{{ .Title }}
</a>
</h2>
</li>

View File

@ -0,0 +1,22 @@
<svg style="display: none">
<symbol id="bookmark">
<g transform="translate(2266 3206.2)">
<path style="stroke:currentColor;stroke-width:3.2637;fill:none" d="m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z"/>
</g>
</symbol>
<symbol id="w3c">
<text font-size="83" style="font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing="-12" y="67.609352" x="-26.782778">W3C</text>
<text font-size="83" style="font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y="67.609352" x="153.21722" font-weight="bold">SVG</text>
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z"/>
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z"/>
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z"/>
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z"/>
</symbol>
<symbol id="tag">
<g transform="translate(0 -875.2)">
<path style="fill-rule:evenodd;stroke-width:0;fill:#111111" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
</g>
</symbol>
</svg>

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

@ -0,0 +1,8 @@
<li>
<h2>
<a href="{{ .Permalink }}">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
{{ .Title }}
</a>
</h2>
</li>

View File

@ -0,0 +1,21 @@
{{ define "main" }}
<main id="main">
<h1>{{ .Title }}</h1>
{{ if isset .Params "tags" }}
<div class="tags">
<strong aria-hidden="true">Tags: </strong>
<ul aria-label="tags">
{{ range .Params.tags }}
<li>
<svg class="tag" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
<use xlink:href="#tag"></use>
</svg>
<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
</li>
{{ end }}
</ul>
</div>
{{ end }}
{{ .Content }}
</main>
{{ end }}

View File

@ -0,0 +1,30 @@
{{ $uniq := .Inner | htmlEscape | base64Encode | truncate 15 "" }}
<div class="demo-container">
<div id="demo-{{ $uniq }}">
</div>
<template id="template-{{ $uniq }}">
<p>You must be joking.</p>
<style>
p {
color: red !important;
font-family: cursive;
}
</style>
<script>
demo.querySelector('p').addEventListener('click', function() {
alert('hello');
})
</script>
</template>
<script>
(function() {
var root = document.getElementById('demo-{{ $uniq }}');
root.attachShadow({mode: 'open'});
var template = document.getElementById('template-{{ $uniq }}');
var script = template.content.querySelector('script');
script.textContent = 'var demo = document.getElementById(\'demo-{{ $uniq }}\').shadowRoot;' + script.textContent;
root.shadowRoot.appendChild(document.importNode(template.content, true));
console.log(root);
})();
</script>
</div>

View File

@ -0,0 +1,11 @@
{{ $title := .Get 0 }}
{{ range .Site.Pages }}
{{ if eq .Title $title }}
<a class="pattern-link" href="{{ .Permalink }}">
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
{{ .Title }}
</a>
{{ end }}
{{ end }}

View File

@ -0,0 +1,3 @@
<div class="ticks">
{{ .Inner }}
</div>

View File

@ -0,0 +1,6 @@
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="50mm" width="50mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 177.16535 177.16535">
<g transform="translate(0 -875.2)">
<rect style="stroke-width:0;fill:#111" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
<rect style="stroke-width:0;fill:#111" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 535 B

View File

@ -0,0 +1,5 @@
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="22.578mm" width="11.289mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 40.00001 80.000027">
<g transform="translate(-200 -563.49)">
<path style="fill-rule:evenodd;stroke-width:0;fill:#000000" d="m240 563.49-40 40v40l40-40z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 415 B

View File

@ -541,3 +541,13 @@ a .bookmark {
.pattern-link {
font-weight: bold;
}
/* inline demos */
[id^="demo-"] {
all: initial;
}
[id^="demo-"] * {
all: initial;
}

View File

@ -0,0 +1,5 @@
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="50mm" width="50mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 177.16535 177.16535">
<g transform="translate(0 -875.2)">
<path style="fill-rule:evenodd;stroke-width:0;fill:#111111" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 658 B

View File

@ -0,0 +1,68 @@
(function(){
/*
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
'use strict';function n(a,b){return{index:a,i:[],m:b}}
function aa(a,b,c,d){var e=0,h=0,g=0,f=0,k=Math.min(b-e,d-h);if(0==e&&0==h)a:{for(g=0;g<k;g++)if(a[g]!==c[g])break a;g=k}if(b==a.length&&d==c.length){for(var f=a.length,l=c.length,m=0;m<k-g&&ba(a[--f],c[--l]);)m++;f=m}e+=g;h+=g;b-=f;d-=f;if(!(b-e||d-h))return[];if(e==b){for(b=n(e,0);h<d;)b.i.push(c[h++]);return[b]}if(h==d)return[n(e,b-e)];k=e;g=h;d=d-g+1;f=b-k+1;b=Array(d);for(l=0;l<d;l++)b[l]=Array(f),b[l][0]=l;for(l=0;l<f;l++)b[0][l]=l;for(l=1;l<d;l++)for(m=1;m<f;m++)if(a[k+m-1]===c[g+l-1])b[l][m]=
b[l-1][m-1];else{var q=b[l-1][m]+1,y=b[l][m-1]+1;b[l][m]=q<y?q:y}k=b.length-1;g=b[0].length-1;d=b[k][g];for(a=[];0<k||0<g;)k?g?(f=b[k-1][g-1],l=b[k-1][g],m=b[k][g-1],q=l<m?l<f?l:f:m<f?m:f,q==f?(f==d?a.push(0):(a.push(1),d=f),k--,g--):q==l?(a.push(3),k--,d=l):(a.push(2),g--,d=m)):(a.push(3),k--):(a.push(2),g--);a.reverse();b=void 0;k=[];for(g=0;g<a.length;g++)switch(a[g]){case 0:b&&(k.push(b),b=void 0);e++;h++;break;case 1:b||(b=n(e,0));b.m++;e++;b.i.push(c[h]);h++;break;case 2:b||(b=n(e,0));b.m++;
e++;break;case 3:b||(b=n(e,0)),b.i.push(c[h]),h++}b&&k.push(b);return k}function ba(a,b){return a===b};var p=window.ShadyDOM||{};p.S=!(!Element.prototype.attachShadow||!Node.prototype.getRootNode);var t=Object.getOwnPropertyDescriptor(Node.prototype,"firstChild");p.g=!!(t&&t.configurable&&t.get);p.J=p.force||!p.S;function u(a){return"ShadyRoot"===a.M}function v(a){a=a.getRootNode();if(u(a))return a}var w=Element.prototype,ca=w.matches||w.matchesSelector||w.mozMatchesSelector||w.msMatchesSelector||w.oMatchesSelector||w.webkitMatchesSelector;
function x(a,b){if(a&&b)for(var c=Object.getOwnPropertyNames(b),d=0,e;d<c.length&&(e=c[d]);d++){var h=Object.getOwnPropertyDescriptor(b,e);h&&Object.defineProperty(a,e,h)}}function z(a,b){for(var c=[],d=1;d<arguments.length;++d)c[d-1]=arguments[d];for(d=0;d<c.length;d++)x(a,c[d]);return a}function da(a,b){for(var c in b)a[c]=b[c]}var A=document.createTextNode(""),ea=0,B=[];(new MutationObserver(function(){for(;B.length;)try{B.shift()()}catch(a){throw A.textContent=ea++,a;}})).observe(A,{characterData:!0});
function fa(a){B.push(a);A.textContent=ea++};var D=[],E;function ga(a){E||(E=!0,fa(F));D.push(a)}function F(){E=!1;for(var a=!!D.length;D.length;)D.shift()();return a}F.list=D;var ha=/[&\u00A0"]/g,ia=/[&\u00A0<>]/g;function ja(a){switch(a){case "&":return"&amp;";case "<":return"&lt;";case ">":return"&gt;";case '"':return"&quot;";case "\u00a0":return"&nbsp;"}}function ka(a){for(var b={},c=0;c<a.length;c++)b[a[c]]=!0;return b}var la=ka("area base br col command embed hr img input keygen link meta param source track wbr".split(" ")),ma=ka("style script xmp iframe noembed noframes plaintext noscript".split(" "));
function H(a,b){"template"===a.localName&&(a=a.content);for(var c="",d=b?b(a):a.childNodes,e=0,h=d.length,g;e<h&&(g=d[e]);e++){var f;a:{var k;f=g;k=a;var l=b;switch(f.nodeType){case Node.ELEMENT_NODE:for(var m=f.localName,q="<"+m,y=f.attributes,r=0;k=y[r];r++)q+=" "+k.name+'="'+k.value.replace(ha,ja)+'"';q+=">";f=la[m]?q:q+H(f,l)+"</"+m+">";break a;case Node.TEXT_NODE:f=f.data;f=k&&ma[k.localName]?f:f.replace(ia,ja);break a;case Node.COMMENT_NODE:f="\x3c!--"+f.data+"--\x3e";break a;default:throw window.console.error(f),
Error("not implemented");}}c+=f}return c};var I={},J=document.createTreeWalker(document,NodeFilter.SHOW_ALL,null,!1),K=document.createTreeWalker(document,NodeFilter.SHOW_ELEMENT,null,!1);function na(a){var b=[];J.currentNode=a;for(a=J.firstChild();a;)b.push(a),a=J.nextSibling();return b}I.parentNode=function(a){J.currentNode=a;return J.parentNode()};I.firstChild=function(a){J.currentNode=a;return J.firstChild()};I.lastChild=function(a){J.currentNode=a;return J.lastChild()};I.previousSibling=function(a){J.currentNode=a;return J.previousSibling()};
I.nextSibling=function(a){J.currentNode=a;return J.nextSibling()};I.childNodes=na;I.parentElement=function(a){K.currentNode=a;return K.parentNode()};I.firstElementChild=function(a){K.currentNode=a;return K.firstChild()};I.lastElementChild=function(a){K.currentNode=a;return K.lastChild()};I.previousElementSibling=function(a){K.currentNode=a;return K.previousSibling()};I.nextElementSibling=function(a){K.currentNode=a;return K.nextSibling()};
I.children=function(a){var b=[];K.currentNode=a;for(a=K.firstChild();a;)b.push(a),a=K.nextSibling();return b};I.innerHTML=function(a){return H(a,function(a){return na(a)})};I.textContent=function(a){if(a.nodeType!==Node.ELEMENT_NODE)return a.nodeValue;a=document.createTreeWalker(a,NodeFilter.SHOW_TEXT,null,!1);for(var b="",c;c=a.nextNode();)b+=c.nodeValue;return b};var M=Object.getOwnPropertyDescriptor(Element.prototype,"innerHTML")||Object.getOwnPropertyDescriptor(HTMLElement.prototype,"innerHTML"),N=document.implementation.createHTMLDocument("inert").createElement("div"),O=Object.getOwnPropertyDescriptor(Document.prototype,"activeElement"),oa={parentElement:{get:function(){var a=this.__shady&&this.__shady.parentNode;a&&a.nodeType!==Node.ELEMENT_NODE&&(a=null);return void 0!==a?a:I.parentElement(this)},configurable:!0},parentNode:{get:function(){var a=this.__shady&&
this.__shady.parentNode;return void 0!==a?a:I.parentNode(this)},configurable:!0},nextSibling:{get:function(){var a=this.__shady&&this.__shady.nextSibling;return void 0!==a?a:I.nextSibling(this)},configurable:!0},previousSibling:{get:function(){var a=this.__shady&&this.__shady.previousSibling;return void 0!==a?a:I.previousSibling(this)},configurable:!0},className:{get:function(){return this.getAttribute("class")||""},set:function(a){this.setAttribute("class",a)},configurable:!0},nextElementSibling:{get:function(){if(this.__shady&&
void 0!==this.__shady.nextSibling){for(var a=this.nextSibling;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.nextSibling;return a}return I.nextElementSibling(this)},configurable:!0},previousElementSibling:{get:function(){if(this.__shady&&void 0!==this.__shady.previousSibling){for(var a=this.previousSibling;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.previousSibling;return a}return I.previousElementSibling(this)},configurable:!0}},P={childNodes:{get:function(){var a;if(this.__shady&&void 0!==this.__shady.firstChild){if(!this.__shady.childNodes){this.__shady.childNodes=
[];for(var b=this.firstChild;b;b=b.nextSibling)this.__shady.childNodes.push(b)}a=this.__shady.childNodes}else a=I.childNodes(this);a.item=function(b){return a[b]};return a},configurable:!0},childElementCount:{get:function(){return this.children.length},configurable:!0},firstChild:{get:function(){var a=this.__shady&&this.__shady.firstChild;return void 0!==a?a:I.firstChild(this)},configurable:!0},lastChild:{get:function(){var a=this.__shady&&this.__shady.lastChild;return void 0!==a?a:I.lastChild(this)},
configurable:!0},textContent:{get:function(){if(this.__shady&&void 0!==this.__shady.firstChild){for(var a=[],b=0,c=this.childNodes,d;d=c[b];b++)d.nodeType!==Node.COMMENT_NODE&&a.push(d.textContent);return a.join("")}return I.textContent(this)},set:function(a){if(this.nodeType!==Node.ELEMENT_NODE)this.nodeValue=a;else{for(;this.firstChild;)this.removeChild(this.firstChild);this.appendChild(document.createTextNode(a))}},configurable:!0},firstElementChild:{get:function(){if(this.__shady&&void 0!==this.__shady.firstChild){for(var a=
this.firstChild;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.nextSibling;return a}return I.firstElementChild(this)},configurable:!0},lastElementChild:{get:function(){if(this.__shady&&void 0!==this.__shady.lastChild){for(var a=this.lastChild;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.previousSibling;return a}return I.lastElementChild(this)},configurable:!0},children:{get:function(){var a;this.__shady&&void 0!==this.__shady.firstChild?a=Array.prototype.filter.call(this.childNodes,function(a){return a.nodeType===
Node.ELEMENT_NODE}):a=I.children(this);a.item=function(b){return a[b]};return a},configurable:!0},innerHTML:{get:function(){var a="template"===this.localName?this.content:this;return this.__shady&&void 0!==this.__shady.firstChild?H(a):I.innerHTML(a)},set:function(a){for(var b="template"===this.localName?this.content:this;b.firstChild;)b.removeChild(b.firstChild);for(M&&M.set?M.set.call(N,a):N.innerHTML=a;N.firstChild;)b.appendChild(N.firstChild)},configurable:!0}},pa={shadowRoot:{get:function(){return this.__shady&&
this.__shady.root||null},set:function(a){this.__shady=this.__shady||{};this.__shady.root=a},configurable:!0}},Q={activeElement:{get:function(){var a;a=O&&O.get?O.get.call(document):p.g?void 0:document.activeElement;if(a&&a.nodeType){var b=!!u(this);if(this===document||b&&this.host!==a&&this.host.contains(a)){for(b=v(a);b&&b!==this;)a=b.host,b=v(a);a=this===document?b?null:a:b===this?a:null}else a=null}else a=null;return a},set:function(){},configurable:!0}};
function R(a,b,c){for(var d in b){var e=Object.getOwnPropertyDescriptor(a,d);e&&e.configurable||!e&&c?Object.defineProperty(a,d,b[d]):c&&console.warn("Could not define",d,"on",a)}}function S(a){R(a,oa);R(a,P);R(a,Q)}var qa=p.g?function(){}:function(a){a.__shady&&a.__shady.N||(a.__shady=a.__shady||{},a.__shady.N=!0,R(a,oa,!0))},ra=p.g?function(){}:function(a){a.__shady&&a.__shady.L||(a.__shady=a.__shady||{},a.__shady.L=!0,R(a,P,!0),R(a,pa,!0))};function sa(a,b,c){qa(a);c=c||null;a.__shady=a.__shady||{};b.__shady=b.__shady||{};c&&(c.__shady=c.__shady||{});a.__shady.previousSibling=c?c.__shady.previousSibling:b.lastChild;var d=a.__shady.previousSibling;d&&d.__shady&&(d.__shady.nextSibling=a);(d=a.__shady.nextSibling=c)&&d.__shady&&(d.__shady.previousSibling=a);a.__shady.parentNode=b;c?c===b.__shady.firstChild&&(b.__shady.firstChild=a):(b.__shady.lastChild=a,b.__shady.firstChild||(b.__shady.firstChild=a));b.__shady.childNodes=null}
function T(a){if(!a.__shady||void 0===a.__shady.firstChild){a.__shady=a.__shady||{};a.__shady.firstChild=I.firstChild(a);a.__shady.lastChild=I.lastChild(a);ra(a);for(var b=a.__shady.childNodes=I.childNodes(a),c=0,d;c<b.length&&(d=b[c]);c++)d.__shady=d.__shady||{},d.__shady.parentNode=a,d.__shady.nextSibling=b[c+1]||null,d.__shady.previousSibling=b[c-1]||null,qa(d)}};var U={},ta=Element.prototype.insertBefore,ua=Element.prototype.removeChild,va=Element.prototype.setAttribute,wa=Element.prototype.removeAttribute,xa=Element.prototype.cloneNode,ya=Document.prototype.importNode,za=Element.prototype.addEventListener,Aa=Element.prototype.removeEventListener,Ba=Window.prototype.addEventListener,Ca=Window.prototype.removeEventListener,Da=Element.prototype.dispatchEvent;U.appendChild=Element.prototype.appendChild;U.insertBefore=ta;U.removeChild=ua;U.setAttribute=va;
U.removeAttribute=wa;U.cloneNode=xa;U.importNode=ya;U.addEventListener=za;U.removeEventListener=Aa;U.T=Ba;U.U=Ca;U.dispatchEvent=Da;var Ea="function"===typeof Event?Event:function(a,b){b=b||{};var c=document.createEvent("Event");c.initEvent(a,!!b.bubbles,!!b.cancelable);return c};function V(a){this.root=a;this.s="slot"}
V.prototype.D=function(){var a;if(Fa(this.root)){a=[];for(var b=0,c=this.root.host.firstChild;c;c=c.nextSibling)a[b++]=c;for(var b=[],c=Ga(this.root),d=0,e=c.length,h;d<e&&(h=c[d]);d++){var g=void 0,f,k=h,l=a,m=k.__shady.assignedNodes;m&&Ha(k,!0);k.__shady.assignedNodes=[];for(var q=!1,y=!1,r=0,L=l.length;r<L;r++){f=l[r];var C;if(C=f){var G=f;C=(C=k.getAttribute("name"))?C.trim():"";G=(G=G.getAttribute&&G.getAttribute("slot"))?G.trim():"";C=G==C}C&&(f.__shady.C!=k&&(q=!0),y=k,y.__shady.assignedNodes.push(f),
f.__shady.assignedSlot=y,l[r]=void 0,y=!0)}if(!y)for(l=k.childNodes,r=0;r<l.length;r++)f=l[r],f.__shady.C!=k&&(q=!0),L=k,L.__shady.assignedNodes.push(f),f.__shady.assignedSlot=L;if(m){for(f=0;f<m.length;f++)m[f].__shady.C=null;k.__shady.assignedNodes.length<m.length&&(q=!0)}m=k.__shady.assignedNodes;k.__shady.f=[];for(f=0;f<m.length&&(g=m[f]);f++)if(g.localName&&"slot"==g.localName){if(l=g.__shady.f)for(r=0;r<l.length;r++)k.__shady.f.push(l[r])}else k.__shady.f.push(m[f]);q&&Ia(this,k);(g=(g=h.parentNode)&&
g.__shady&&g.__shady.root)&&Fa(g)&&b.push(g)}for(c=0;c<a.length;c++)if(h=a[c])h.__shady=h.__shady||{},h.__shady.assignedSlot=void 0,(d=I.parentNode(h))&&U.removeChild.call(d,h);a=b}else a=[];return a};function Ha(a,b){var c=a.__shady.assignedNodes;if(c)for(var d=0;d<c.length;d++){var e=c[d];b&&(e.__shady.C=e.__shady.assignedSlot);e.__shady.assignedSlot===a&&(e.__shady.assignedSlot=null)}}
function Ia(a,b){U.dispatchEvent.call(b,new Ea("slotchange"));b.__shady.assignedSlot&&Ia(a,b.__shady.assignedSlot)}V.prototype.u=function(a){return!a.__shady.assignedSlot};var Ja={};function W(a,b){if(a!==Ja)throw new TypeError("Illegal constructor");a=document.createDocumentFragment();a.__proto__=W.prototype;a.M="ShadyRoot";T(b);T(a);b.shadowRoot=a;a.host=b;a.c=!1;a.B=!1;a.b=new V(a);a.update();return a}W.prototype=Object.create(DocumentFragment.prototype);W.prototype.update=function(){var a=this;this.c||(this.c=!0,ga(function(){return Ka(a)}))};
function Ka(a){if(a.c){for(var b=a;a;){a.c&&(b=a);a:{var c;c=a;a=c.host.getRootNode();if(u(a))for(var d=c.host.childNodes,e=0;e<d.length;e++)if(c=d[e],c.localName&&"slot"==c.localName)break a;a=void 0}}b._render()}}W.prototype._render=function(){this.B=this.c=!1;this.l||La(this);this.l=!1;this.D();Ma(this.host,Na(this,this.host));for(var a=Ga(this),b=0,c=a.length,d,e;b<c&&(d=a[b]);b++)e=d.parentNode,e!==this.host&&e!==this&&Ma(e,Na(this,e))};W.prototype.D=function(){for(var a=this.b.D(),b=0;b<a.length;b++)a[b]._render()};
function La(a){var b=a.a;if(b)for(var c=0,d;c<b.length;c++)d=b[c],d.getRootNode()!==a&&Ha(d);b=a.a=a.b.root.querySelectorAll("slot");for(a=0;a<b.length;a++)d=b[a],d.__shady=d.__shady||{},T(d),T(d.parentNode)}function Na(a,b){var c=[];b=(b.__shady&&b.__shady.root||b).childNodes;for(var d=0;d<b.length;d++){var e=b[d];if(e.localName&&"slot"==e.localName)for(var h=e.__shady.f||(e.__shady.f=[]),g=0;g<h.length;g++){var f=h[g];a.u(e,f)&&c.push(f)}else c.push(e)}return c}
W.prototype.u=function(a,b){return this.b.u(a,b)};function Ma(a,b){for(var c=I.childNodes(a),d=aa(b,b.length,c,c.length),e=0,h=0,g;e<d.length&&(g=d[e]);e++){for(var f=0,k;f<g.i.length&&(k=g.i[f]);f++)I.parentNode(k)===a&&U.removeChild.call(a,k),c.splice(g.index+h,1);h-=g.m}for(e=0;e<d.length&&(g=d[e]);e++)for(h=c[g.index],f=g.index;f<g.index+g.m;f++)k=b[f],U.insertBefore.call(a,k,h),c.splice(f,0,k)}function Fa(a){return!(!a.a||!a.a.length)}function Ga(a){a.a||La(a);return a.a}
W.prototype.addEventListener=function(a,b,c){"object"!==typeof c&&(c={capture:!!c});c.A=this;this.host.addEventListener(a,b,c)};W.prototype.removeEventListener=function(a,b,c){"object"!==typeof c&&(c={capture:!!c});c.A=this;this.host.removeEventListener(a,b,c)};W.prototype.getElementById=function(a){return this.querySelector("#"+a)};var Oa=W.prototype;R(Oa,P,!0);R(Oa,Q,!0);function Pa(a){var b=a.__shady&&a.__shady.parentNode,c,d=v(a);if(b||d){c=Qa(a);if(b){a.__shady=a.__shady||{};b.__shady=b.__shady||{};a===b.__shady.firstChild&&(b.__shady.firstChild=a.__shady.nextSibling);a===b.__shady.lastChild&&(b.__shady.lastChild=a.__shady.previousSibling);var e=a.__shady.previousSibling,h=a.__shady.nextSibling;e&&(e.__shady=e.__shady||{},e.__shady.nextSibling=h);h&&(h.__shady=h.__shady||{},h.__shady.previousSibling=e);a.__shady.parentNode=a.__shady.previousSibling=a.__shady.nextSibling=
void 0;void 0!==b.__shady.childNodes&&(b.__shady.childNodes=null)}if(e=d){for(var g,e=Ga(d),h=0;h<e.length;h++){var f=e[h],k;a:{for(k=f;k;){if(k==a){k=!0;break a}k=k.parentNode}k=void 0}if(k)for(f=f.assignedNodes({flatten:!0}),k=0;k<f.length;k++){g=!0;var l=f[k],m=I.parentNode(l);m&&U.removeChild.call(m,l)}}e=g}b=b&&d&&b.localName===d.b.s;if(e||b)d.l=!1,X(d)}Ra(a);return c}function Sa(a,b,c){if(a=a.__shady&&a.__shady.h)b&&a.addedNodes.push(b),c&&a.removedNodes.push(c),Ta(a)}
function Ua(a){if(a&&a.nodeType){a.__shady=a.__shady||{};var b=a.__shady.F;void 0===b&&(u(a)?b=a:b=(b=a.parentNode)?Ua(b):a,document.documentElement.contains(a)&&(a.__shady.F=b));return b}}function Va(a,b,c){var d,e=c.b.s;if(a.nodeType!==Node.DOCUMENT_FRAGMENT_NODE||a.__noInsertionPoint)a.localName===e&&(T(b),T(a),d=!0);else for(var e=a.querySelectorAll(e),h=0,g,f;h<e.length&&(g=e[h]);h++)f=g.parentNode,f===a&&(f=b),f=Va(g,f,c),d=d||f;return d}
function Wa(a){return(a=a&&a.__shady&&a.__shady.root)&&Fa(a)}function Ra(a){if(a.__shady&&void 0!==a.__shady.F)for(var b=a.childNodes,c=0,d=b.length,e;c<d&&(e=b[c]);c++)Ra(e);a.__shady=a.__shady||{};a.__shady.F=void 0}function Qa(a){a=a.parentNode;if(Wa(a))return X(a.__shady.root),!0}function X(a){a.B=!0;a.update()}function Xa(a,b){"slot"===b?Qa(a):"slot"===a.localName&&"name"===b&&(a=v(a))&&a.update()}function Ya(a,b,c){var d=[];Za(a.childNodes,b,c,d);return d}
function Za(a,b,c,d){for(var e=0,h=a.length,g;e<h&&(g=a[e]);e++){var f;if(f=g.nodeType===Node.ELEMENT_NODE){f=g;var k=b,l=c,m=d,q=k(f);q&&m.push(f);l&&l(q)?f=q:(Za(f.childNodes,k,l,m),f=void 0)}if(f)break}}var Y=null;
function $a(a,b,c){if(c){var d=c.__shady&&c.__shady.parentNode;if(void 0!==d&&d!==a||void 0===d&&I.parentNode(c)!==a)throw Error("Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.");}if(c===b)return b;b.nodeType!==Node.DOCUMENT_FRAGMENT_NODE&&((d=b.__shady&&b.__shady.parentNode)?(Sa(d,null,b),Pa(b)):(b.parentNode&&U.removeChild.call(b.parentNode,b),Ra(b)));var d=c,e=v(a),h;e&&(b.__noInsertionPoint&&!e.B&&(e.l=!0),h=Va(b,a,
e))&&(e.l=!1);if(a.__shady&&void 0!==a.__shady.firstChild)if(ra(a),a.__shady=a.__shady||{},void 0!==a.__shady.firstChild&&(a.__shady.childNodes=null),b.nodeType===Node.DOCUMENT_FRAGMENT_NODE){for(var g=b.childNodes,f=0;f<g.length;f++)sa(g[f],a,d);b.__shady=b.__shady||{};g=void 0!==b.__shady.firstChild?null:void 0;b.__shady.firstChild=b.__shady.lastChild=g;b.__shady.childNodes=g}else sa(b,a,d);var g=h,f=e&&e.b.s||"",k=b.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&!b.__noInsertionPoint&&f&&b.querySelector(f);
h=k&&k.parentNode.nodeType!==Node.DOCUMENT_FRAGMENT_NODE;((k=k||b.localName===f)||a.localName===f||g)&&e&&X(e);(e=Wa(a))&&X(a.__shady&&a.__shady.root);if(!(e||k&&!h||a.__shady.root||d&&u(d.parentNode)&&d.parentNode.c)){if(c&&(d=v(c))){var l;if(c.localName===d.b.s)a:{d=c.assignedNodes({flatten:!0});e=Ua(c);h=0;for(g=d.length;h<g&&(l=d[h]);h++)if(e.u(c,l))break a;l=void 0}else l=c;c=l}l=u(a)?a.host:a;c?U.insertBefore.call(l,b,c):U.appendChild.call(l,b)}Sa(a,b);return b}
function ab(a,b){if(a.ownerDocument!==document)return U.importNode.call(document,a,b);var c=U.importNode.call(document,a,!1);if(b){a=a.childNodes;b=0;for(var d;b<a.length;b++)d=ab(a[b],!0),c.appendChild(d)}return c};function bb(){this.a=!1;this.addedNodes=[];this.removedNodes=[];this.o=new Set}function Ta(a){a.a||(a.a=!0,fa(function(){cb(a)}))}function cb(a){if(a.a){a.a=!1;var b=a.takeRecords();b.length&&a.o.forEach(function(a){a(b)})}}bb.prototype.takeRecords=function(){if(this.addedNodes.length||this.removedNodes.length){var a=[{addedNodes:this.addedNodes,removedNodes:this.removedNodes}];this.addedNodes=[];this.removedNodes=[];return a}return[]};
function db(a,b){a.__shady=a.__shady||{};a.__shady.h||(a.__shady.h=new bb);a.__shady.h.o.add(b);var c=a.__shady.h;return{O:b,R:c,P:a,takeRecords:function(){return c.takeRecords()}}}function eb(a){var b=a&&a.R;b&&(b.o.delete(a.O),b.o.size||(a.P.__shady.h=null))}
function fb(a,b){var c=b.getRootNode();return a.map(function(a){var b=c===a.target.getRootNode();if(b&&a.addedNodes){if(b=Array.from(a.addedNodes).filter(function(a){return c===a.getRootNode()}),b.length)return a=Object.create(a),Object.defineProperty(a,"addedNodes",{value:b,configurable:!0}),a}else if(b)return a}).filter(function(a){return a})};var gb={blur:!0,focus:!0,focusin:!0,focusout:!0,click:!0,dblclick:!0,mousedown:!0,mouseenter:!0,mouseleave:!0,mousemove:!0,mouseout:!0,mouseover:!0,mouseup:!0,wheel:!0,beforeinput:!0,input:!0,keydown:!0,keyup:!0,compositionstart:!0,compositionupdate:!0,compositionend:!0,touchstart:!0,touchend:!0,touchmove:!0,touchcancel:!0,pointerover:!0,pointerenter:!0,pointerdown:!0,pointermove:!0,pointerup:!0,pointercancel:!0,pointerout:!0,pointerleave:!0,gotpointercapture:!0,lostpointercapture:!0,dragstart:!0,
drag:!0,dragenter:!0,dragleave:!0,dragover:!0,drop:!0,dragend:!0,DOMActivate:!0,DOMFocusIn:!0,DOMFocusOut:!0,keypress:!0};function hb(a,b){var c=[],d=a;for(a=a===window?window:a.getRootNode();d;)c.push(d),d=d.assignedSlot?d.assignedSlot:d.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&d.host&&(b||d!==a)?d.host:d.parentNode;c[c.length-1]===document&&c.push(window);return c}
function ib(a,b){if(!u)return a;a=hb(a,!0);for(var c=0,d,e,h,g;c<b.length;c++)if(d=b[c],h=d===window?window:d.getRootNode(),h!==e&&(g=a.indexOf(h),e=h),!u(h)||-1<g)return d}
var jb={get composed(){!1!==this.isTrusted&&void 0===this.v&&(this.v=gb[this.type]);return this.v||!1},composedPath:function(){this.G||(this.G=hb(this.__target,this.composed));return this.G},get target(){return ib(this.currentTarget,this.composedPath())},get relatedTarget(){if(!this.H)return null;this.I||(this.I=hb(this.H,!0));return ib(this.currentTarget,this.I)},stopPropagation:function(){Event.prototype.stopPropagation.call(this);this.w=!0},stopImmediatePropagation:function(){Event.prototype.stopImmediatePropagation.call(this);
this.w=this.K=!0}};function kb(a){function b(b,d){b=new a(b,d);b.v=d&&!!d.composed;return b}da(b,a);b.prototype=a.prototype;return b}var lb={focus:!0,blur:!0};function mb(a,b,c){if(c=b.__handlers&&b.__handlers[a.type]&&b.__handlers[a.type][c])for(var d=0,e;(e=c[d])&&a.target!==a.relatedTarget&&(e.call(b,a),!a.K);d++);}
function nb(a){var b=a.composedPath(),c;Object.defineProperty(a,"currentTarget",{get:function(){return c},configurable:!0});for(var d=b.length-1;0<=d;d--)if(c=b[d],mb(a,c,"capture"),a.w)return;Object.defineProperty(a,"eventPhase",{get:function(){return Event.AT_TARGET}});for(var e,d=0;d<b.length;d++)if(c=b[d],!d||c.shadowRoot&&c.shadowRoot===e)if(mb(a,c,"bubble"),c!==window&&(e=c.getRootNode()),a.w)break}
function ob(a,b,c,d,e,h){for(var g=0;g<a.length;g++){var f=a[g],k=f.type,l=f.capture,m=f.once,q=f.passive;if(b===f.node&&c===k&&d===l&&e===m&&h===q)return g}return-1}
function pb(a,b,c){if(b){var d,e,h;"object"===typeof c?(d=!!c.capture,e=!!c.once,h=!!c.passive):(d=!!c,h=e=!1);var g=c&&c.A||this,f=b.j;if(f){if(-1<ob(f,g,a,d,e,h))return}else b.j=[];f=function(d){e&&this.removeEventListener(a,b,c);d.__target||qb(d);var f;g!==this&&(f=Object.getOwnPropertyDescriptor(d,"currentTarget"),Object.defineProperty(d,"currentTarget",{get:function(){return g},configurable:!0}));if(d.composed||-1<d.composedPath().indexOf(g))if(d.target===d.relatedTarget)d.eventPhase===Event.BUBBLING_PHASE&&
d.stopImmediatePropagation();else if(d.eventPhase===Event.CAPTURING_PHASE||d.bubbles||d.target===g){var h="object"===typeof b&&b.handleEvent?b.handleEvent(d):b.call(g,d);g!==this&&(f?(Object.defineProperty(d,"currentTarget",f),f=null):delete d.currentTarget);return h}};b.j.push({node:this,type:a,capture:d,once:e,passive:h,V:f});lb[a]?(this.__handlers=this.__handlers||{},this.__handlers[a]=this.__handlers[a]||{capture:[],bubble:[]},this.__handlers[a][d?"capture":"bubble"].push(f)):(this instanceof
Window?U.T:U.addEventListener).call(this,a,f,c)}}function rb(a,b,c){if(b){var d,e,h;"object"===typeof c?(d=!!c.capture,e=!!c.once,h=!!c.passive):(d=!!c,h=e=!1);var g=c&&c.A||this,f=void 0,k;k=null;try{k=b.j}catch(l){}k&&(e=ob(k,g,a,d,e,h),-1<e&&(f=k.splice(e,1)[0].V,k.length||(b.j=void 0)));(this instanceof Window?U.U:U.removeEventListener).call(this,a,f||b,c);f&&lb[a]&&this.__handlers&&this.__handlers[a]&&(a=this.__handlers[a][d?"capture":"bubble"],f=a.indexOf(f),-1<f&&a.splice(f,1))}}
function sb(){for(var a in lb)window.addEventListener(a,function(a){a.__target||(qb(a),nb(a))},!0)}function qb(a){a.__target=a.target;a.H=a.relatedTarget;if(p.g){var b=Object.getPrototypeOf(a);if(!b.hasOwnProperty("__patchProto")){var c=Object.create(b);c.W=b;x(c,jb);b.__patchProto=c}a.__proto__=b.__patchProto}else x(a,jb)}var tb=kb(window.Event),ub=kb(window.CustomEvent),vb=kb(window.MouseEvent);function wb(a){var b=a.getRootNode();u(b)&&Ka(b);return a.__shady&&a.__shady.assignedSlot||null}
var xb={addEventListener:pb.bind(window),removeEventListener:rb.bind(window)},yb={addEventListener:pb,removeEventListener:rb,appendChild:function(a){return $a(this,a)},insertBefore:function(a,b){return $a(this,a,b)},removeChild:function(a){if(a.parentNode!==this)throw Error("The node to be removed is not a child of this node: "+a);if(!Pa(a)){var b=u(this)?this.host:this,c=I.parentNode(a);b===c&&U.removeChild.call(b,a)}Sa(this,null,a);return a},replaceChild:function(a,b){this.insertBefore(a,b);this.removeChild(b);
return a},cloneNode:function(a){var b;if("template"==this.localName)b=U.cloneNode.call(this,a);else if(b=U.cloneNode.call(this,!1),a){a=this.childNodes;for(var c=0,d;c<a.length;c++)d=a[c].cloneNode(!0),b.appendChild(d)}return b},getRootNode:function(){return Ua(this)},get isConnected(){var a=this.ownerDocument;if(a&&a.contains&&a.contains(this)||(a=a.documentElement)&&a.contains&&a.contains(this))return!0;for(a=this;a&&!(a instanceof Document);)a=a.parentNode||(a instanceof W?a.host:void 0);return!!(a&&
a instanceof Document)},dispatchEvent:function(a){F();return U.dispatchEvent.call(this,a)}},zb={get assignedSlot(){return wb(this)}},Ab={querySelector:function(a){return Ya(this,function(b){return ca.call(b,a)},function(a){return!!a})[0]||null},querySelectorAll:function(a){return Ya(this,function(b){return ca.call(b,a)})}},Bb={assignedNodes:function(a){if("slot"===this.localName){var b=this.getRootNode();u(b)&&Ka(b);return this.__shady?(a&&a.flatten?this.__shady.f:this.__shady.assignedNodes)||[]:
[]}}},Cb=z({setAttribute:function(a,b){Y||(Y=window.ShadyCSS&&window.ShadyCSS.ScopingShim);Y&&"class"===a?Y.setElementClass(this,b):(U.setAttribute.call(this,a,b),Xa(this,a))},removeAttribute:function(a){U.removeAttribute.call(this,a);Xa(this,a)},attachShadow:function(a){if(!this)throw"Must provide a host.";if(!a)throw"Not enough arguments.";return new W(Ja,this)},get slot(){return this.getAttribute("slot")},set slot(a){this.setAttribute("slot",a)},get assignedSlot(){return wb(this)}},Ab,Bb);
Object.defineProperties(Cb,pa);var Db=z({importNode:function(a,b){return ab(a,b)},getElementById:function(a){return this.querySelector("#"+a)}},Ab);Object.defineProperties(Db,{_activeElement:Q.activeElement});var Eb=HTMLElement.prototype.blur,Fb=z({blur:function(){var a=this.shadowRoot;(a=a&&a.activeElement)?a.blur():Eb.call(this)}});
function Z(a,b){for(var c=Object.getOwnPropertyNames(b),d=0;d<c.length;d++){var e=c[d],h=Object.getOwnPropertyDescriptor(b,e);h.value?a[e]=h.value:Object.defineProperty(a,e,h)}};if(p.J){window.ShadyDOM={inUse:p.J,patch:function(a){return a},isShadyRoot:u,enqueue:ga,flush:F,settings:p,filterMutations:fb,observeChildren:db,unobserveChildren:eb,nativeMethods:U,nativeTree:I};window.Event=tb;window.CustomEvent=ub;window.MouseEvent=vb;sb();var Gb=window.customElements&&window.customElements.nativeHTMLElement||HTMLElement;Z(window.Node.prototype,yb);Z(window.Window.prototype,xb);Z(window.Text.prototype,zb);Z(window.DocumentFragment.prototype,Ab);Z(window.Element.prototype,Cb);Z(window.Document.prototype,
Db);window.HTMLSlotElement&&Z(window.HTMLSlotElement.prototype,Bb);Z(Gb.prototype,Fb);p.g&&(S(window.Node.prototype),S(window.Text.prototype),S(window.DocumentFragment.prototype),S(window.Element.prototype),S(Gb.prototype),S(window.Document.prototype),window.HTMLSlotElement&&S(window.HTMLSlotElement.prototype));window.ShadowRoot=W};
}).call(self);
//# sourceMappingURL=shadydom.min.js.map