JavaScript 實作一個 search-box Web 元件

woff

1. <script>
   
2.     class SearchBox extends HTMLElement {
   
3.         constructor() {
   
4.             super();
   
5.             this.attachShadow({mode:"open"});
   
6.             this.shadowRoot.append(SearchBox.template.content.cloneNode(true));
   
7. 
   
8.             this.input = this.shadowRoot.querySelector("#input");
   
9.             this.leftSlot = this.shadowRoot.querySelector('slot[name="left"]');
   
10.             this.rightSlot = this.shadowRoot.querySelector('slot[name="right"]');
    
11. 
    
12.             this.input.onfocus = () => {this.setAttribute("focused", ""); };
    
13.             this.input.onblur = () => {this.removeAttribute("focused", ""); };
    
14. 
    
15.             leftSolt.onclick = this.input.onchange = (event) => {
    
16.                 event.stopPropagation();
    
17.                 if (this.disabled) return ;
    
18.                 this.dispatchEvent(new CustomEvent("search",{
    
19.                     detail:this.input.value
    
20.                 }));
    
21.             }
    
22. 
    
23.             rightSolt.onclick = (event) => {
    
24.                 event.stopPropagation();
    
25.                 if (this.disabled) return ;
    
26. 
    
27.                 this.dispatchEvent(e);
    
28.                 if (!e.defaultPrevented) {
    
29.                     this.input.value = "";
    
30.                 }
    
31.             };
    
32.         }
    
33. 
    
34.         attributeChangedCallback(name, oldValue, newValue){
    
35.                 if (name === " disabled") {
    
36.                     this.input.disabled = newValue !== null ;
    
37.                 } else if (name === "placeholder") {
    
38.                     this.input.placeholder = newValue;
    
39.                 } else if (name === "size") {
    
40.                     this.input.size = newValue;
    
41.                 } else if (name === "value") {
    
42.                     this.input.value = newValue;
    
43.                 }
    
44.             }
    
45. 
    
46.         get placeholder(){ return this.getAttribute("placeholder"); }
    
47.         get size(){ return this.getAttribute("size"); }
    
48.         get value(){ return this.getAttribute("value"); }
    
49.         get disabled(){ return this.hasAttribute("disabled"); }
    
50.         get hidden(){ return this.hasAttribute("hidden"); }
    
51. 
    
52. 
    
53.         set placeholder(value){ this.setAttribute("placeholder", value); }
    
54.         set size(value){ this.setAttribute("size", value); }
    
55.         set value(text){ this.setAttribute("value", text); }
    
56.         set disabled(value){
    
57.             if (value) this.setAttribute("disabled", );
    
58.             else this.removeAttribute("disabled");
    
59.         }
    
60. 
    
61.         set hidden(value){
    
62.             if (value) this.setAttribute("hidden", );
    
63.             else this.removeAttribute("hidden");
    
64.         }
    
65.     }
    
66. 
    
67.     SearchBox.observedAttributes = ["disabled", "placeholder","size", "value"];
    
68. 
    
69.     SearchBox.template = document.createElement("template");
    
70.     SearchBox.template.innerHTML =`
    
71.     <style>
    
72.     :host {
    
73.         display: inline-block;
    
74.         border: solid black 1px;
    
75.         border-radius: 5px;
    
76.         padding: 4px 6px;
    
77.     }
    
78. 
    
79.     :host([hidden]) {
    
80.         display: none;
    
81.     }
    
82.     :host([disabled]){
    
83.         opacity: 0.5;
    
84.     }
    
85.     :host([focused]) {
    
86.         box-shadow: 0 0 2px 2px #6AE;
    
87.     }
    
88. 
    
89.     input {
    
90.         border-width: 0;
    
91.         outline: none;
    
92.         font: inherit;
    
93.         background: inherit;
    
94.     }
    
95. 
    
96.     slot {
    
97.         cursor: default;
    
98.         user-select: none;
    
99.     }
    
100.     </style>
     
101.     <div>
     
102.         <slot name="left">\u{1f50d}</slot>
     
103.         <input type="text" id="input" />
     
104.         <slot name="right">\u{2573}</slot>
     
105.     </div>
     
106.     `;
     
107.     customElements.define("search-box",SearchBox);
     
108.    
     
109. </script>

複製代碼

HTML
<body>加入

1. <search-box>
   
2.             </search-box>

複製代碼

完成圖

search-box, Web,元件