diff --git a/index.html b/index.html
index c86e75cf..5df0b2b5 100644
--- a/index.html
+++ b/index.html
@@ -112,7 +112,7 @@
     <script src="/libs/jquery-3.1.1.min.js"></script>
     <script defer src="/libs/jquery-ui.min.js"></script>
     <script defer src="/libs/jquery.ui.touch-punch.min.js"></script>
-    <link href="/libs/jquery-ui.css" as="style" />
+    <link href="/libs/jquery-ui.css" rel="stylesheet" />
     <script src="/libs/define-globals.js"></script>
 
     <!-- styles -->
diff --git a/src/components/fill-box.ts b/src/components/fill-box.ts
index cef1177b..b338f53e 100644
--- a/src/components/fill-box.ts
+++ b/src/components/fill-box.ts
@@ -1,4 +1,4 @@
-import {tip} from "../scripts/tooltips";
+import {tip} from "scripts/tooltips";
 
 const template = document.createElement("template");
 template.innerHTML = /* html */ `
@@ -29,6 +29,9 @@ class FillBox extends HTMLElement {
     super();
 
     this.tooltip = this.dataset.tip || "Fill style. Click to change";
+
+    // cannot use Shadow DOM here as need an access to svg hatches
+    this.appendChild(template.content.cloneNode(true));
   }
 
   private showTip() {
@@ -36,8 +39,6 @@ class FillBox extends HTMLElement {
   }
 
   connectedCallback() {
-    // cannot use Shadow DOM here as need an access to svg hatches
-    this.appendChild(template.content.cloneNode(true));
     this.querySelector("rect")?.setAttribute("fill", this.fill);
     this.querySelector("svg")?.setAttribute("width", this.size);
     this.querySelector("svg")?.setAttribute("height", this.size);