diff --git a/src/Tracy/Bar/assets/bar.css b/src/Tracy/Bar/assets/bar.css
index 80cf43af0..70c2f70e5 100644
--- a/src/Tracy/Bar/assets/bar.css
+++ b/src/Tracy/Bar/assets/bar.css
@@ -12,63 +12,64 @@ body#tracy-debug { /* in popup window */
 	display: block;
 }
 
-#tracy-debug:not(body) {
+:host {
 	position: absolute;
 	left: 0;
 	top: 0;
+	margin: 0;
 }
 
-#tracy-debug a {
+a {
 	color: #125EAE;
 	text-decoration: none;
 }
 
-#tracy-debug a:hover,
-#tracy-debug a:focus {
+a:hover,
+a:focus {
 	background-color: #125EAE;
 	color: white;
 }
 
-#tracy-debug h2,
-#tracy-debug h3,
-#tracy-debug p {
+h2,
+h3,
+p {
 	margin: .4em 0;
 }
 
-#tracy-debug table {
+table {
 	background: #FDF5CE;
 	width: 100%;
 }
 
-#tracy-debug tr:nth-child(2n) td {
+tr:nth-child(2n) td {
 	background: rgba(0, 0, 0, 0.02);
 }
 
-#tracy-debug td,
-#tracy-debug th {
+td,
+th {
 	border: 1px solid #E6DFBF;
 	padding: 2px 5px;
 	vertical-align: top;
 	text-align: left;
 }
 
-#tracy-debug th {
+th {
 	background: #F4F3F1;
 	color: #655E5E;
 	font-size: 90%;
 	font-weight: bold;
 }
 
-#tracy-debug pre,
-#tracy-debug code {
+pre,
+code {
 	font: 9pt/1.5 Consolas, monospace;
 }
 
-#tracy-debug table .tracy-right {
+table .tracy-right {
 	text-align: right;
 }
 
-#tracy-debug svg {
+svg {
 	display: inline;
 }
 
@@ -168,7 +169,7 @@ body#tracy-debug { /* in popup window */
 
 
 /* panels */
-#tracy-debug .tracy-panel {
+.tracy-panel {
 	display: none;
 	font: normal normal 12px/1.5 sans-serif;
 	background: white;
@@ -176,11 +177,11 @@ body#tracy-debug { /* in popup window */
 	text-align: left;
 }
 
-body#tracy-debug .tracy-panel { /* in popup window */
+body.tracy-panel { /* in popup window */
 	display: block;
 }
 
-#tracy-debug h1 {
+h1 {
 	font: normal normal 23px/1.4 Tahoma, sans-serif;
 	color: #575753;
 	margin: -5px -5px 5px;
@@ -188,29 +189,29 @@ body#tracy-debug .tracy-panel { /* in popup window */
 	word-wrap: break-word;
 }
 
-#tracy-debug .tracy-inner {
+.tracy-inner {
 	overflow: auto;
 	flex: 1;
 }
 
-#tracy-debug .tracy-panel .tracy-icons {
+.tracy-panel .tracy-icons {
 	display: none;
 }
 
-#tracy-debug .tracy-panel-ajax h1::after,
-#tracy-debug .tracy-panel-redirect h1::after {
+.tracy-panel-ajax h1::after,
+.tracy-panel-redirect h1::after {
 	content: 'ajax';
 	float: right;
 	font-size: 65%;
 	margin: 0 .3em;
 }
 
-#tracy-debug .tracy-panel-redirect h1::after {
+.tracy-panel-redirect h1::after {
 	content: 'redirect';
 }
 
-#tracy-debug .tracy-mode-peek,
-#tracy-debug .tracy-mode-float {
+.tracy-mode-peek,
+.tracy-mode-float {
 	position: fixed;
 	flex-direction: column;
 	padding: 10px;
@@ -221,24 +222,24 @@ body#tracy-debug .tracy-panel { /* in popup window */
 	border: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-#tracy-debug .tracy-mode-peek,
-#tracy-debug .tracy-mode-float:not(.tracy-panel-resized) {
+.tracy-mode-peek,
+.tracy-mode-float:not(.tracy-panel-resized) {
 	max-width: 700px;
 	max-height: 500px;
 }
 
 @media (max-height: 555px) {
-	#tracy-debug .tracy-mode-peek,
-	#tracy-debug .tracy-mode-float:not(.tracy-panel-resized) {
+	.tracy-mode-peek,
+	.tracy-mode-float:not(.tracy-panel-resized) {
 		max-height: 100vh;
 	}
 }
 
-#tracy-debug .tracy-mode-peek h1 {
+.tracy-mode-peek h1 {
 	cursor: move;
 }
 
-#tracy-debug .tracy-mode-float {
+.tracy-mode-float {
 	display: flex;
 	opacity: .95;
 	transition: opacity 0.2s;
@@ -247,18 +248,18 @@ body#tracy-debug .tracy-panel { /* in popup window */
 	resize: both;
 }
 
-#tracy-debug .tracy-focused {
+.tracy-focused {
 	display: flex;
 	opacity: 1;
 	transition: opacity 0.1s;
 }
 
-#tracy-debug .tracy-mode-float h1 {
+.tracy-mode-float h1 {
 	cursor: move;
 	padding-right: 25px;
 }
 
-#tracy-debug .tracy-mode-float .tracy-icons {
+.tracy-mode-float .tracy-icons {
 	display: block;
 	position: absolute;
 	top: 0;
@@ -266,26 +267,26 @@ body#tracy-debug .tracy-panel { /* in popup window */
 	font-size: 18px;
 }
 
-#tracy-debug .tracy-mode-window {
+.tracy-mode-window {
 	padding: 10px;
 }
 
-#tracy-debug .tracy-icons a {
+.tracy-icons a {
 	color: #575753;
 }
 
-#tracy-debug .tracy-icons a:hover {
+.tracy-icons a:hover {
 	color: white;
 }
 
 
-#tracy-debug .tracy-inner-container {
+.tracy-inner-container {
 	min-width: 100%;
 	float: left;
 }
 
 @media print {
-	#tracy-debug * {
+	* {
 		display: none;
 	}
 }
diff --git a/src/Tracy/Bar/assets/bar.js b/src/Tracy/Bar/assets/bar.js
index 114c84c68..090c7f053 100644
--- a/src/Tracy/Bar/assets/bar.js
+++ b/src/Tracy/Bar/assets/bar.js
@@ -4,7 +4,8 @@
 
 let requestId = document.currentScript.dataset.id,
 	ajaxCounter = 1,
-	baseUrl = location.href.split('#')[0];
+	baseUrl = location.href.split('#')[0],
+	root;
 
 baseUrl += (baseUrl.indexOf('?') < 0 ? '?' : '&');
 
@@ -24,7 +25,7 @@ class Panel
 {
 	constructor(id) {
 		this.id = id;
-		this.elem = document.getElementById(this.id);
+		this.elem = root.getElementById(this.id);
 		this.elem.Tracy = this.elem.Tracy || {};
 	}
 
@@ -34,7 +35,7 @@ class Panel
 
 		this.init = function() {};
 		elem.innerHTML = elem.dataset.tracyContent;
-		Tracy.Dumper.init(Debug.layer);
+		Tracy.Dumper.init(root);
 		delete elem.dataset.tracyContent;
 		evalScripts(elem);
 
@@ -244,7 +245,7 @@ class Bar
 {
 	init() {
 		this.id = 'tracy-debug-bar';
-		this.elem = document.getElementById(this.id);
+		this.elem = root.getElementById(this.id);
 
 		draggable(this.elem, {
 			handles: this.elem.querySelectorAll('li:first-child'),
@@ -348,7 +349,7 @@ class Bar
 
 
 	close() {
-		document.getElementById('tracy-debug').style.display = 'none';
+		root.getElementById('tracy-debug').style.display = 'none';
 	}
 
 
@@ -388,15 +389,16 @@ class Debug
 	static init(content) {
 		Debug.bar = new Bar;
 		Debug.panels = {};
-		Debug.layer = document.createElement('tracy-div');
-		Debug.layer.setAttribute('id', 'tracy-debug');
-		Debug.layer.innerHTML = content;
+		Debug.layer = document.createElement('tracy-debug');
+		root = Debug.layer.shadowRoot;
+		root.innerHTML = content;
+		root.appendChild(document.querySelector('style.tracy-debug'));
 		(document.body || document.documentElement).appendChild(Debug.layer);
-		evalScripts(Debug.layer);
+		evalScripts(root);
 		Debug.layer.style.display = 'block';
 		Debug.bar.init();
 
-		Debug.layer.querySelectorAll('.tracy-panel').forEach((panel) => {
+		root.querySelectorAll('.tracy-panel').forEach((panel) => {
 			Debug.panels[panel.id] = new Panel(panel.id);
 			Debug.panels[panel.id].restorePosition();
 		});
@@ -433,12 +435,12 @@ class Debug
 			});
 		}
 
-		Debug.layer.insertAdjacentHTML('beforeend', content.panels);
-		evalScripts(Debug.layer);
+		root.insertAdjacentHTML('beforeend', content.panels);
+		evalScripts(root);
 		Debug.bar.elem.insertAdjacentHTML('beforeend', content.bar);
 		let ajaxBar = Debug.bar.elem.querySelector('.tracy-row:last-child');
 
-		Debug.layer.querySelectorAll('.tracy-panel').forEach((panel) => {
+		root.querySelectorAll('.tracy-panel').forEach((panel) => {
 			if (!Debug.panels[panel.id]) {
 				Debug.panels[panel.id] = new Panel(panel.id);
 				Debug.panels[panel.id].restorePosition();
@@ -671,6 +673,16 @@ function getPosition(elem) {
 }
 
 
+class TracyDebugElement extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({mode: 'open'});
+	}
+}
+
+window.customElements.define('tracy-debug', TracyDebugElement);
+
+
 let Tracy = window.Tracy = window.Tracy || {};
 Tracy.DebugPanel = Panel;
 Tracy.DebugBar = Bar;
diff --git a/src/Tracy/assets/reset.css b/src/Tracy/assets/reset.css
index e333f841e..c34442a2c 100644
--- a/src/Tracy/assets/reset.css
+++ b/src/Tracy/assets/reset.css
@@ -2,8 +2,7 @@
  * This file is part of the Tracy (https://tracy.nette.org)
  */
 
-tracy-div:not(a b),
-tracy-div:not(a b) * {
+* {
 	font: inherit;
 	line-height: inherit;
 	color: inherit;
@@ -23,354 +22,156 @@ tracy-div:not(a b) * {
 	white-space: inherit;
 	float: none;
 	clear: none;
-	max-width: initial;
-	min-width: initial;
-	max-height: initial;
-	min-height: initial;
 }
 
-tracy-div:not(a b) *:hover {
+*:hover {
 	color: inherit;
 	background: transparent;
 }
 
-tracy-div:not(a b) *:not(svg):not(img):not(table) {
-	width: initial;
-	height: initial;
-}
-
-tracy-div:not(a b):before,
-tracy-div:not(a b):after,
-tracy-div:not(a b) *:before,
-tracy-div:not(a b) *:after {
-	all: unset;
-}
-
-tracy-div:not(a b) b,
-tracy-div:not(a b) strong {
+b,
+strong {
 	font-weight: bold;
 }
 
-tracy-div:not(a b) small {
+small {
 	font-size: smaller;
 }
 
-tracy-div:not(a b) i,
-tracy-div:not(a b) em {
+i,
+em {
 	font-style: italic;
 }
 
-tracy-div:not(a b) big {
+big {
 	font-size: larger;
 }
 
-tracy-div:not(a b) small,
-tracy-div:not(a b) sub,
-tracy-div:not(a b) sup {
+small,
+sub,
+sup {
 	font-size: smaller;
 }
 
-tracy-div:not(a b) ins {
+ins {
 	text-decoration: underline;
 }
 
-tracy-div:not(a b) del {
+del {
 	text-decoration: line-through;
 }
 
-tracy-div:not(a b) table {
+table {
 	border-collapse: collapse;
 }
 
-tracy-div:not(a b) pre {
+pre {
 	font-family: monospace;
 	white-space: pre;
 }
 
-tracy-div:not(a b) code,
-tracy-div:not(a b) kbd,
-tracy-div:not(a b) samp {
+code,
+kbd,
+samp {
 	font-family: monospace;
 }
 
-tracy-div:not(a b) input {
+input {
 	background-color: white;
 	padding: 1px;
 	border: 1px solid;
 }
 
-tracy-div:not(a b) textarea {
+textarea {
 	background-color: white;
 	border: 1px solid;
 	padding: 2px;
 	white-space: pre-wrap;
 }
 
-tracy-div:not(a b) select {
+select {
 	border: 1px solid;
 	white-space: pre;
 }
 
-tracy-div:not(a b) article,
-tracy-div:not(a b) aside,
-tracy-div:not(a b) details,
-tracy-div:not(a b) div,
-tracy-div:not(a b) figcaption,
-tracy-div:not(a b) footer,
-tracy-div:not(a b) form,
-tracy-div:not(a b) header,
-tracy-div:not(a b) hgroup,
-tracy-div:not(a b) main,
-tracy-div:not(a b) nav,
-tracy-div:not(a b) section,
-tracy-div:not(a b) summary,
-tracy-div:not(a b) pre,
-tracy-div:not(a b) p,
-tracy-div:not(a b) dl,
-tracy-div:not(a b) dd,
-tracy-div:not(a b) dt,
-tracy-div:not(a b) blockquote,
-tracy-div:not(a b) figure,
-tracy-div:not(a b) address,
-tracy-div:not(a b) h1,
-tracy-div:not(a b) h2,
-tracy-div:not(a b) h3,
-tracy-div:not(a b) h4,
-tracy-div:not(a b) h5,
-tracy-div:not(a b) h6,
-tracy-div:not(a b) ul,
-tracy-div:not(a b) ol,
-tracy-div:not(a b) li,
-tracy-div:not(a b) hr {
+article,
+aside,
+details,
+div,
+figcaption,
+footer,
+form,
+header,
+hgroup,
+main,
+nav,
+section,
+summary,
+pre,
+p,
+dl,
+dd,
+dt,
+blockquote,
+figure,
+address,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+ol,
+li,
+hr {
 	display: block;
 }
 
-tracy-div:not(a b) a,
-tracy-div:not(a b) b,
-tracy-div:not(a b) big,
-tracy-div:not(a b) code,
-tracy-div:not(a b) em,
-tracy-div:not(a b) i,
-tracy-div:not(a b) small,
-tracy-div:not(a b) span,
-tracy-div:not(a b) strong {
+a,
+b,
+big,
+code,
+em,
+i,
+small,
+span,
+strong {
 	display: inline;
 }
 
-tracy-div:not(a b) table {
+table {
 	display: table;
 }
 
-tracy-div:not(a b) tr {
+tr {
 	display: table-row;
 }
 
-tracy-div:not(a b) col {
+col {
 	display: table-column;
 }
 
-tracy-div:not(a b) colgroup {
+colgroup {
 	display: table-column-group;
 }
 
-tracy-div:not(a b) tbody {
+tbody {
 	display: table-row-group;
 }
 
-tracy-div:not(a b) thead {
+thead {
 	display: table-header-group;
 }
 
-tracy-div:not(a b) tfoot {
+tfoot {
 	display: table-footer-group;
 }
 
-tracy-div:not(a b) td {
+td {
 	display: table-cell;
 }
 
-tracy-div:not(a b) th {
+th {
 	display: table-cell;
 }
-
-
-
-/* TableSort */
-tracy-div:not(a b) .tracy-sortable > :first-child > tr:first-child > * {
-	position: relative;
-}
-
-tracy-div:not(a b) .tracy-sortable > :first-child > tr:first-child > *:hover:before {
-	position: absolute;
-	right: .3em;
-	content: "\21C5";
-	opacity: .4;
-	font-weight: normal;
-}
-
-
-/* dump */
-tracy-div:not(a b) .tracy-dump div {
-	padding-left: 3ex;
-}
-
-tracy-div:not(a b) .tracy-dump div div {
-	border-left: 1px solid rgba(0, 0, 0, .1);
-	margin-left: .5ex;
-}
-
-tracy-div:not(a b) .tracy-dump div div:hover {
-	border-left-color: rgba(0, 0, 0, .25);
-}
-
-tracy-div:not(a b) .tracy-dump {
-	background: #FDF5CE;
-	padding: .4em .7em;
-	border: 1px dotted silver;
-	overflow: auto;
-}
-
-tracy-div:not(a b) table .tracy-dump.tracy-dump { /* overwrite .tracy-dump.tracy-light etc. */
-	padding: 0;
-	margin: 0;
-	border: none;
-}
-
-tracy-div:not(a b) .tracy-dump-location {
-	color: gray;
-	font-size: 80%;
-	text-decoration: none;
-	background: none;
-	opacity: .5;
-	float: right;
-	cursor: pointer;
-}
-
-tracy-div:not(a b) .tracy-dump-location:hover,
-tracy-div:not(a b) .tracy-dump-location:focus {
-	color: gray;
-	background: none;
-	opacity: 1;
-}
-
-tracy-div:not(a b) .tracy-dump-array,
-tracy-div:not(a b) .tracy-dump-object {
-	color: #C22;
-}
-
-tracy-div:not(a b) .tracy-dump-string {
-	color: #35D;
-	white-space: break-spaces;
-}
-
-tracy-div:not(a b) div.tracy-dump-string {
-	position: relative;
-	padding-left: 3.5ex;
-}
-
-tracy-div:not(a b) .tracy-dump-lq {
-	margin-left: calc(-1ex - 1px);
-}
-
-tracy-div:not(a b) div.tracy-dump-string:before {
-	content: '';
-	position: absolute;
-	left: calc(3ex - 1px);
-	top: 1.5em;
-	bottom: 0;
-	border-left: 1px solid rgba(0, 0, 0, .1);
-}
-
-tracy-div:not(a b) .tracy-dump-virtual span,
-tracy-div:not(a b) .tracy-dump-dynamic span,
-tracy-div:not(a b) .tracy-dump-string span {
-	color: rgba(0, 0, 0, 0.5);
-}
-
-tracy-div:not(a b) .tracy-dump-virtual i,
-tracy-div:not(a b) .tracy-dump-dynamic i,
-tracy-div:not(a b) .tracy-dump-string i {
-	font-size: 80%;
-	font-style: normal;
-	color: rgba(0, 0, 0, 0.5);
-	user-select: none;
-}
-
-tracy-div:not(a b) .tracy-dump-number {
-	color: #090;
-}
-
-tracy-div:not(a b) .tracy-dump-null,
-tracy-div:not(a b) .tracy-dump-bool {
-	color: #850;
-}
-
-tracy-div:not(a b) .tracy-dump-virtual {
-	font-style: italic;
-}
-
-tracy-div:not(a b) .tracy-dump-public::after {
-	content: ' pub';
-}
-
-tracy-div:not(a b) .tracy-dump-protected::after {
-	content: ' pro';
-}
-
-tracy-div:not(a b) .tracy-dump-private::after {
-	content: ' pri';
-}
-
-tracy-div:not(a b) .tracy-dump-public::after,
-tracy-div:not(a b) .tracy-dump-protected::after,
-tracy-div:not(a b) .tracy-dump-private::after,
-tracy-div:not(a b) .tracy-dump-hash {
-	font-size: 85%;
-	color: rgba(0, 0, 0, 0.5);
-}
-
-tracy-div:not(a b) .tracy-dump-indent {
-	display: none;
-}
-
-tracy-div:not(a b) .tracy-dump-highlight {
-	background: #C22;
-	color: white;
-	border-radius: 2px;
-	padding: 0 2px;
-	margin: 0 -2px;
-}
-
-tracy-div:not(a b) span[data-tracy-href] {
-	border-bottom: 1px dotted rgba(0, 0, 0, .2);
-}
-
-
-/* toggle */
-tracy-div:not(a b) .tracy-toggle:after {
-	content: '';
-	display: inline-block;
-	vertical-align: middle;
-	line-height: 0;
-	border-top: .6ex solid;
-	border-right: .6ex solid transparent;
-	border-left: .6ex solid transparent;
-	transform: scale(1, 1.5);
-	margin: 0 .2ex 0 .7ex;
-	transition: .1s transform;
-	opacity: .5;
-}
-
-tracy-div:not(a b) .tracy-toggle.tracy-collapsed:after {
-	transform: rotate(-90deg) scale(1, 1.5) translate(.1ex, 0);
-}
-
-
-/* tabs */
-tracy-div:not(a b) .tracy-tab-label {
-	user-select: none;
-}
-
-tracy-div:not(a b) .tracy-tab-panel:not(.tracy-active) {
-	display: none;
-}