bz-select improvements

buildoz.css

@@ -29,9 +29,16 @@ bz-select > button::after {
     font-size: 1.5em;
     color: #444;
 }    
-
+bz-select >  div.options-container{
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    z-index: 99;
+}
 bz-select option{
     background-color: #DDD;
+    border: 1px solid black;
     color: #000;
     padding: 0.2em .2em .3em .5em;
     margin: -1em 0 0 0;
@@ -46,7 +53,7 @@ bz-select option{
         opacity 0.3s ease;
 }
 bz-select option.open{
-    margin: 2px 0 0 0;
+    margin: 0;
     opacity: 1;
     pointer-events: auto;
 }

buildoz.js

@@ -55,9 +55,12 @@ class BZselect extends Buildoz {
     connectedCallback() { 
         super.connectedCallback()
         this.button = document.createElement('button')
-        this.button.textContent =  this.getBZAttribute('label')
+        this.button.textContent = this.getBZAttribute('label')
         this.prepend(this.button)
         this.button.addEventListener('click', this.toggle.bind(this))
+        if(!this.optionscontainer) this.optionscontainer = document.createElement('div')
+        this.optionscontainer.classList.add('options-container')
+        this.append(this.optionscontainer)
         this.options = this.querySelectorAll('option')
         if(this.#fillFromMarkup){ //can only do it once and only if fillOptions was not already called !!
             for(const opt of this.options){ 
@@ -112,18 +115,19 @@ class BZselect extends Buildoz {
     }
 
     addOption(value, markup){
-        // Caution: you can count on connectedCallback to have run already, because one might fill before adding to the DOM
+        // Caution: you cannot count on connectedCallback to have run already, because one might fill before adding to the DOM
         const opt = document.createElement('option')
         opt.setAttribute('value', value)
         opt.innerHTML = markup
         opt.addEventListener('click',this.onClick.bind(this))
-        this.append(opt)
+        if(!this.optionscontainer) this.optionscontainer = document.createElement('div')
+        this.optionscontainer.append(opt)
         this.options = this.querySelectorAll('option')
         this.#fillFromMarkup = false
     }
 
     fillOptions(opts, erase = true){ 
-        // Caution: you can count on connectedCallback to have run already, because one might fill before adding to the DOM
+        // Caution: you cannot count on connectedCallback to have run already, because one might fill before adding to the DOM
         if(erase){
             this.options = this.querySelectorAll('option') 
             this.options.forEach(node => { node.remove() })