Skip to content

Commit 2360f4c

Browse files
committed
Link to custom element support table and polyfill
1 parent 2039ffe commit 2360f4c

File tree

1 file changed

+27
-13
lines changed

1 file changed

+27
-13
lines changed

README.md

Lines changed: 27 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,23 @@
22

33
A Client Side Includes tag.
44

5-
65
## Installation
76

87
```
98
$ npm install --save include-fragment-element
109
```
1110

12-
This component is built on the [Web Component](http://webcomponents.org/) stack. Specifically, it requires a feature called [Custom Elements](http://www.html5rocks.com/en/tutorials/webcomponents/customelements/). You'll need to use a polyfill to get this feature today. Either the [Polymer](http://www.polymer-project.org/) or [X-Tag](http://www.x-tags.org/) frameworks supply a polyfill, or you can install the standalone [CustomElements](https://github.com/webcomponents/webcomponentsjs) polyfill.
13-
14-
Legacy browsers require other generic polyfills. See `examples/index.html` for details.
15-
16-
``` html
17-
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.22/webcomponents-hi-ce.js"></script>
18-
```
19-
2011
## Usage
2112

2213
All `include-fragment` elements must have a `src` attribute from which to retrieve an HTML element fragment.
2314

2415
The initial page load should include fallback content to be displayed if the resource could not be fetched immediately.
2516

26-
**Original:**
17+
```js
18+
import 'include-fragment-element'
19+
```
20+
21+
**Original**
2722

2823
``` html
2924
<div class="tip">
@@ -35,7 +30,7 @@ The initial page load should include fallback content to be displayed if the res
3530

3631
On page load, the `include-fragment` element fetches the URL, the response is parsed into an HTML element, which replaces the `include-fragment` element entirely.
3732

38-
**Result:**
33+
**Result**
3934

4035
``` html
4136
<div class="tip">
@@ -76,11 +71,30 @@ This declarative approach is very similar to [SSI](http://en.wikipedia.org/wiki/
7671

7772
A proxy may attempt to fetch and replace the fragment if the request finishes before the timeout. Otherwise the tag is delivered to the client. This library only implements the client side aspect.
7873

74+
## Browser support
75+
76+
Browsers without native [custom element support][support] require a [polyfill][].
7977

80-
## Browser Support
78+
Legacy browsers require various other polyfills. See [`examples/index.html`][example] for details.
79+
80+
[example]: https://github.com/github/include-fragment-element/blob/master/examples/index.html#L5-L14
8181

8282
- Chrome
8383
- Firefox
84-
- Safari 9+
84+
- Safari
8585
- Internet Explorer 11
8686
- Microsoft Edge
87+
88+
[support]: https://caniuse.com/#feat=custom-elementsv1
89+
[polyfill]: https://github.com/webcomponents/custom-elements
90+
91+
## Development
92+
93+
```
94+
npm install
95+
npm test
96+
```
97+
98+
## License
99+
100+
Distributed under the MIT license. See LICENSE for details.

0 commit comments

Comments
 (0)