fix: selector not working for six root docs

Author: Davide Marcoli

docs/examples/docs-demo-six-root-0.vue

@@ -4,24 +4,24 @@
         <div class="six-root-wrapper">
           <six-root stage="PROD" style="height: 100%" version="PROD-1.2.3">
             <six-header slot="header">
-              
+
               <six-header-item>
-                <six-icon-button name="menu"></six-icon-button>
+                <six-icon-button id="menu-button" name="menu"></six-icon-button>
               </six-header-item>
 
-              
+
               <six-header-item>
                 <six-icon-button href="https://six-group.github.io/six-webcomponents/">
                   <six-logo></six-logo>
                 </six-icon-button>
               </six-header-item>
 
-              
+
               <six-header-item id="search-header-item" style="margin-left: auto">
                 <six-icon-button name="search"></six-icon-button>
               </six-header-item>
 
-              
+
               <six-header-dropdown-item>
                 <six-icon-button slot="trigger">
                   <six-avatar                     image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
@@ -36,7 +36,7 @@
                 </six-menu>
               </six-header-dropdown-item>
 
-              
+
               <six-search-field slot="search-field" placeholder="Search for some 'a' ..." clearable>
                 <div id="search-results">Some results</div>
               </six-search-field>
@@ -198,9 +198,9 @@
           <six-button slot="footer">Close</six-button>
         </six-drawer>
 
-        
-        
-      
+
+
+
 </div>
 </template>
 <style>
@@ -215,12 +215,12 @@
             content: '';
             height: 5rem;
           }
-        
+
 </style>
 <script>
 export default {
   name: 'docs-demo-six-root-0',
-  mounted() { 
+  mounted() {
           (() => {
             const getElements = (e) =>
               Object.entries(e).reduce(
@@ -242,7 +242,7 @@ export default {
               rightSidebar: 'six-sidebar[slot="right-sidebar"]',
               drawer: 'six-drawer',
               cards: ['six-sidebar[slot="right-sidebar"] six-card'],
-              hamburger: 'six-icon-button[name="menu"]',
+              hamburger: '#menu-button',
               searchItem: '#search-header-item',
             });
 
@@ -269,4 +269,4 @@ export default {
           })();
          }
 }
-</script>
+</script>

libraries/ui-library/src/components/six-root/index.html

@@ -28,7 +28,7 @@ <h2>Basic Layout with all elements</h2>
             <six-header slot="header">
               <!-- hamburger menu -->
               <six-header-item>
-                <six-icon-button name="menu"></six-icon-button>
+                <six-icon-button id="menu-button" name="menu"></six-icon-button>
               </six-header-item>
 
               <!-- logo -->
@@ -243,7 +243,7 @@ <h3>Task</h3>
               rightSidebar: 'six-sidebar[slot="right-sidebar"]',
               drawer: 'six-drawer',
               cards: ['six-sidebar[slot="right-sidebar"] six-card'],
-              hamburger: 'six-icon-button[name="menu"]',
+              hamburger: '#menu-button',
               searchItem: '#search-header-item',
             });