feat: Start supporting CSS ::part() [#32]

nfreear · Nov 6, 2022 · b206eee · b206eee
1 parent d83777c
commit b206eee
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/src/components/my-bookmarklet.tpl.html b/src/components/my-bookmarklet.tpl.html
@@ -2,12 +2,14 @@
   Themes: https://unpkg.com/browse/[email protected]/themes/css/
 -->
 
+<!--
+<script src="https://unpkg.com/[email protected]/dist/bundle.min.js" crossorigin="" async ></script>
+-->
+
 <template>
   <link href="https://unpkg.com/[email protected]/themes/css/pastie.css" rel="stylesheet" />
   <script src="https://unpkg.com/[email protected]/dist/rainbow.min.js" crossorigin="" async></script>
 
-  <script src="https://unpkg.com/[email protected]/dist/bundle.min.js" crossorigin="" async ></script>
-
   <style>
     a[ href ^= javascript ] {
       background: LightYellow;
@@ -69,7 +71,7 @@ <h2 id="name"> [ Name ] </h2>
   <p> Drag the link below to your browser's bookmarks or favourites bar. </p>
 
   <p>
-    <a id="js-link" href="javascript:;" title="Drag me!">Hello</a>
+    <a id="js-link" part="js-link" href="javascript:;" title="Drag me!">Hello</a>
   </p>
 
   <details open >

diff --git a/src/components/my-skip-link.tpl.html b/src/components/my-skip-link.tpl.html
@@ -26,5 +26,5 @@
   }
   </style>
 
-  <a href="#main-content"><slot> Skip to main content </slot></a>
+  <a href="#main-content" part="a"><slot> Skip to main content </slot></a>
 </template>
diff --git a/src/components/my-star-rating.tpl.html b/src/components/my-star-rating.tpl.html
@@ -103,6 +103,6 @@
 <template id="star-svg">
   <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1235" height="1175" viewBox="0 0 1235 1175">
     <!--<title>Star</title>-->
-    <path class="path-star" d="M0,449h1235l-999,726 382-1175 382,1175z"/>
+    <path class="path-star" part="star" d="M0,449h1235l-999,726 382-1175 382,1175z"/>
   </svg>
 </template>