ajax-component
A Custom Element that AJAXs its content, style, and scripts.
Features
- HTTP2 first. A component performs AJAX requests to fetch its HTML, CSS, and JS.
- Scoped CSS. Via the Shadow DOM,
ajax-component
has native CSS scoping (no build step required). - Scoped JavaScript. Execute anything, with access to the global scope, but without polluting it.
- Familiar. Same old HTML, CSS, and JS. Just new elements.
Install
$ npm i ajax-component --save
Use
Decide on a name
for your element (it must contain a -
).
HTML
Using your name
, add the new element to your markup:
<!-- note that a closing tag is required -->
Then, add the these attributes to load your resources:
Attribute | Extension | Required | Optional |
---|---|---|---|
content |
.html | ✓ | |
style |
.css | ✓ | |
script |
.js | ✓ |
<!-- will load HTML only --><!-- while not technically required, scoped CSS and/or JS isn't useful without HTML --> <!-- will load HTML content, scoped CSS, and scoped JS -->
Finally, add the fetch
attribute to your element.
It must have an initial value of false
(or this wouldn't be an AJAX component).
JavaScript
Using your name
, in your JavaScript, pass it to the import:
// import the default export// this is a function that accepts an element name // call the imported function// pass the element name as used in the HTML to create the Custom Element
An element will AJAX its resources when the fetch
attribute changes to true
.
// selected the element we want to loadconst customEl = document // set the fetch attribute to truecustomEl
Browser Support
pjax-component
makes use of the Custom Elements v1 API. As such, it runs natively in the following (see caniuse):
- Chrome 54+
- Safari 10.1+
- Opera 42+
Roadmap
- Explore polyfill options (potential impact on scoping)
License
MIT. © 2017 Michael Cavalea