So for today I wanted to implement a search bar similar to the design from yesterday for the web.
Because I wanted to include the search bar directly into this post, I needed some kind of component that I can directly include into my website. For that purpose I wanted to use web components.
Web components, when included in a website, act similar to html tags and have their own css.
And you don’t have to write that much boilerplate code: https://svelte.dev/blog/write-less-code
With svelte you can also build vanilla web components (called custom components), what I have done in this example. (A template, if you are interested: https://github.com/gojutin/svelte-custom-element)
With a simple
npm run build or similar, you can build a web component and include the resulting script file (like
build.js) into your HTML file.
Then you can use your component just like any other html element.
<script src="/search-bar.js"></script> <search-bar></search-bar>
Now of course, here it is. The search bar included as web component into this post.
Try searching for any word on this post below: