# An intro to web components with otters

DevFeed: [An intro to web components with otters](<https://devfeed.tech/articles/an-intro-to-web-components-with-otters-35553.md>)

Original publisher: [Read original article](<https://meowni.ca/posts/web-components-with-otters/>)

Author: Monica Dinculescu

Published: 2017-06-06T00:00:00Z

Content type: tutorial

Language: en

Sources: [Monica Dinculescu](<https://devfeed.tech/sources/monica-dinculescu.md>)

Topics: [Web Components](<https://devfeed.tech/topics/web-components.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Web platform](<https://devfeed.tech/topics/web-platform.md>), [piecesjs](<https://devfeed.tech/topics/piecesjs.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [components](<https://devfeed.tech/tags/components.md>), [developers](<https://devfeed.tech/tags/developers.md>), [framework](<https://devfeed.tech/tags/framework.md>), [ui](<https://devfeed.tech/tags/ui.md>), [web](<https://devfeed.tech/tags/web.md>)

## AI overview

An introductory tutorial explaining web components as a browser feature for creating encapsulated, reusable elements. It covers using existing components and writing custom components, with Polymer mentioned as a supporting library.

## Source excerpt

I work on a library called Polymer, which helps you write web components faster and easier. This is awesome, but it's only awesome if you (yes, YOU) know what a web component is, and know that you want to write one. So here's a story about what these things are and teaches you how to use them without showing you 10 pages of docs and getting you to install tools and CLIs. Maybe it's for you. Maybe it isn't. In either case, it has otters. Why should you care? Thinking about your app Where do web components live? Polyfills and you 1. I want to use someone else's web component in my app 1. Install the web component Status check 2. Import it in the app 3. Insert it somewhere in the app Status check 2. I want to write a web component to use in my app That's all there is! 👋 See you soon, new web component friends! Why should you care? Web components aren't a new library or framework, they're a new browser feature, and they let you write encapsulated and reusable components (more details). If you've ever used an <input> element, I like to think of it as the OG web component, because it's exactly that. The thing is that before web components came around, you had to wait on all browsers to agree on a new element (like, a date picker). And even after they agreed on a new element, it took them yeaaaaars to implement it. <input type="date"> was drafted in 2011 - today, 6 years later, not all browsers have implemented it! With web components, web developers get to write such elements, so that you don't have to wait for 10 years before all browsers agree that they should implement a date picker. P cool, right? A component is a bunch of code that fits logically together, kinda like a unit of functionality. This could be a simple widget like a fancy button or a date picker, or a more complex UI setup like "a responsive blog layout" Encapsulated means that an element's styles and children are scoped to itself, so you can't accidentally break what it looks like by using CSS haphazardl