ajax-component
v0.2.1
Published
A Custom Element that AJAXs its content.
Downloads
3
Maintainers
Readme
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 -->
<ajax-component></ajax-component>
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 -->
<ajax-component content="path/to/file.html"></ajax-component>
<!-- will load HTML content, scoped CSS, and scoped JS -->
<ajax-component
content="path/to/file.html"
style="path/to/file.css"
script="path/to/file.js">
</ajax-component>
Finally, add the fetch
attribute to your element.
It must have an initial value of false
(or this wouldn't be an AJAX component).
<ajax-component
fetch="false"
content="path/to/file.html"
style="path/to/file.css"
script="path/to/file.js">
</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
import createAJAXComponent from 'ajax-component'
// call the imported function
// pass the element name as used in the HTML to create the Custom Element
createAJAXComponent('ajax-component')
An element will AJAX its resources when the fetch
attribute changes to true
.
// selected the element we want to load
const customEl = document.querySelector('ajax-component')
// set the fetch attribute to true
customEl.setAttribute('fetch', 'true')
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