Web Component for an "Alert Box" element. (Requires: HTML Imports, HTML Templates, Custom Elements, and Shadow DOM)
<link rel="import" href="http://pixelhandler.github.io/alert-box-web-components/index.html">
Well don't really use that URL, but that is a copy of the dist file, instead install...
npm install alert-box-web-components
npm install
npm run start
launches broccoli (development) servernpm run open
opens location http://localhost:4200/example/
Click X
icons to dismiss alert box, click buttons to render more.
The alert box on the lower right is an example of an alert box with a countdown. Hours and seconds tick down, then closes and a new alert follows.
Brocfile.js (broccoli) is the build recipe, npm run build
will create
dist/index.html and dist/example/ only the index.html file is released with
bower and npm packages. To watch and build use npm run start
then open
links under the heading below. Use ctrl-C to stop.
W3.org Specs
Tutorials / Links
- WebComponents.org
- Custom Elements
- Custom Elements - A Web Components Gallery for Modern Web Apps
- Custom Elements: defining new elements in HTML - HTML5 Rocks
- Introduction to Shadow DOM — WebComponents.org
- Shadow DOM 101 - HTML5 Rocks
- Shadow DOM 201: CSS and Styling - HTML5 Rocks
- Shadow DOM 301: Advanced Concepts & DOM APIs - HTML5 Rocks
- getter - JavaScript | MDN
- YOU MIGHT NOT NEED JQUERY