Add support for placeholders as attributes

index.html

@@ -50,7 +50,7 @@
 
 	<p>A better muli-option input box for HTML</p>
 
-	<better-select name="better-selection" class="search">
+	<better-select name="better-selection" class="search" placeholder="Placeholder..." search-placeholder="Search...">
 		<span slot="placeholder">Placeholder...</span>
 		<option value="first">First value</option>
 		<option value="second">Second value</option>

package.json

@@ -3,6 +3,6 @@
 	"browser": "src/BetterSelect.js",
 	"type": "module",
 	"license": "MIT",
-	"version": "1.3.1",
+	"version": "1.4.0",
 	"url": "https://darkwiiplayer.github.io/BetterSelect/"
 }

readme.md

@@ -1,6 +1,11 @@
+## Attributes
+
+* `placeholder` Placeholder displayed when nothing is selected
+* `search-placeholder` Placeholder passed to the search input in the drop-down
+
 ## Slots
 
-* `placeholder`: Only shown when nothing is selected
+* `placeholder`: Only shown when nothing is selected (replaces attribute placeholder if present)
 * `loading`: Hidden by default, shown instead of items while `populate()` runs
 
 ## Parts
@@ -18,9 +23,9 @@
 * `search(string)`: Called on search input to update the list of options
 * `match(string, element)`: Used by `search` to compare each option to the search string
 
-## Attributes
+## Properties
 
-* `closeSignal`: An AbortSignal that fires when the drop-down closes
+* `closeSignal`: (read-only) An AbortSignal that fires when the drop-down closes
 
 ## Events
 

src/BetterSelect.js

@@ -1,3 +1,4 @@
+
 const template = fn => {
 	return (arr, ...params) => {
 		if (arr instanceof Array) {
@@ -57,6 +58,7 @@ export class BetterSelect extends HTMLElement {
 
 	#internals = this.attachInternals()
 	static formAssociated = true
+	static observedAttributes = Object.freeze(["placeholder", "search-placeholder"])
 
 	static styleSheet = css`
 		:host {
@@ -394,7 +396,32 @@ export class BetterSelect extends HTMLElement {
 		}
 	}
 
+	/** Changes the placeholder displayed in the display area
+	 * @param {string} text
+	 */
+	placeholderChanged(text) {
+		this.placeholder.innerText = text
+	}
+
+	/** Changes the placeholder displayed in the search box when the drop-down is open
+	 * @param {string} text
+	 */
+	searchPlaceholderChanged(text) {
+		this.input.placeholder = text
+	}
+
 	clear() {
 		this.setValue(undefined, "")
 	}
+
+	/**
+	 * @param {String} name
+	 * @param {String} before
+	 * @param {String} after
+	 */
+	attributeChangedCallback(name, before, after) {
+		const methodName = name.replace(/-([a-z])/g, (_all, letter) => (letter.toUpperCase())) + "Changed"
+		if (methodName in this) this[methodName](after, before)
 	}
+}
+