Skip to content

Web Components

Web Components are a set of features currently[1] being added by the W3C to the HTML and DOM specifications that allow for the creation of reusable widgets or components in web documents and web applications. The intention behind them is to bring component-based software engineering to the World Wide Web.[citation needed] The components model allows for encapsulation and interoperability of individual HTML elements.

Categories

  • WebComponents:Accordion
  • WebComponents:Alerts
  • WebComponents:Avatar
  • WebComponents:Badge
  • WebComponents:Banner
  • WebComponents:BottomNavigation
  • WebComponents:Breadcrumb
  • WebComponents:Buttons
  • WebComponents:ButtonGroup
  • WebComponents:Card
  • WebComponents:Carousel
  • WebComponents:DeviceMockups
  • WebComponents:Drawer
  • WebComponents:Dropdowns
  • WebComponents:Footer
  • WebComponents:Forms
  • WebComponents:Gallery
  • WebComponents:Indicators
  • WebComponents:Jumbotron
  • WebComponents:KBD
  • WebComponents:ListGroup
  • WebComponents:MegaMenu
  • WebComponents:Modal
  • WebComponents:Navbar
  • WebComponents:Pagination
  • WebComponents:Popover
  • WebComponents:Progress
  • WebComponents:Rating
  • WebComponents:Sidebar
  • WebComponents:Skeleton
  • WebComponents:SpeedDial
  • WebComponents:Spinner
  • WebComponents:Stepper
  • WebComponents:Tables
  • WebComponents:Tabs
  • WebComponents:Timeline
  • WebComponents:Toast
  • WebComponents:Tooltips
  • WebComponents:Typography
  • WebComponents:Video

Web Forms

  • WebForms:InputField
  • WebForms:FileInput
  • WebForms:SearchInput
  • WebForms:NumberInput
  • WebForms:Select
  • WebForms:Textarea
  • WebForms:Checkbox
  • WebForms:Radio
  • WebForms:Toggle
  • WebForms:Range
  • WebForms:FloatingLabel

Reference projects

규격

Web Components consist of 4 main features which can be used separately or all together:

  • Shadow DOM - 컴포넌트의 DOM, CSS, JS를 감추는 캡슐화(encapsulation)와 외부로부터의 간섭을 제어하는 스코프(Scope)의 분리를 제공
  • HTML Template - 로딩 시간에는 비활성화되는 마크업을 정의하고 이를 실행 시간에 복제할 수 있는 기능을 제공
  • Custom Element - 웹 문서에서 사용할 엘리먼트의 동적인 등록을 통해 컴포넌트의 명시적인 alias를 선언
  • HTML Imports - 웹 문서 내에 외부 리소스를 포함(Import)하기 위한 기능을 제공

About

HTML이 기본으로 제공하는 엘리먼트는 브라우저와 운영체에제 따라 다르게 보이는 경우도 있고, 더 발전하는 웹 환경에 대응하기에 한계가 있습니다. 이런 한계를 JavaScript 컴포넌트로 보완하고 있습니다. 그러나 JavaScript 컴포넌트는 사용이 어려울 뿐만 아니라 크기가 커서 실행 속도가 느립니다. W3C(World Wide Web Consortium)에서는 이러한 문제를 개선하고자 웹 컴포넌트(Web Component)라는 명세(Specification)를 만들었습니다.

See also

Favorite site