Skip to content

Commit 3bea4e3

Browse files
Ace Cassidykarol-f
authored andcommitted
Fixed grammar and spelling
Several small changes to grammar and spelling. Thanks!
1 parent 11cb6e3 commit 3bea4e3

File tree

1 file changed

+19
-19
lines changed

1 file changed

+19
-19
lines changed

README.md

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
- [Caveats](#caveats)
1616

1717
## Demo
18-
You can check Vue-custom-element demos at **https://karol-f.github.io/vue-custom-element/**
18+
You can check out Vue-custom-element demos at **https://karol-f.github.io/vue-custom-element/**
1919

2020
## Installation
2121

@@ -53,36 +53,36 @@ import 'document-register-element/build/document-register-element';
5353

5454
## Description
5555

56-
`Vue-custom-element` is a tiny wrapper around Vue components. It provide seamless way to use it in HTML, plain JavaScript, Vue, React, Angular etc., without manually initialising Vue. It's using power of Web Components' Custom Elements.
56+
`Vue-custom-element` is a tiny wrapper around Vue components. It provides a seamless way to use Vue components in HTML, plain JavaScript, Vue, React, Angular etc., without manually initialising Vue. It's using power of Web Components' Custom Elements.
5757
* Works with Vue 0.12.x, 1.x and 2.x
5858
* Small - 2.7 kb min+gzip, optional polyfill - 5 kb min+gzip
5959

6060
### Why you might need `Vue-custom-element`?
6161
![Vue-custom-element](demo/assets/images/vue-custom-element-why.png)
6262

63-
It might be confusing for users to understand difference between Vue components, Custom Elements and it's use cases.
63+
It might be confusing for users to understand the different use cases of Vue components vs Custom Elements .
6464

65-
Why you might need `Vue-custom-element`? Simply, for your Vue components user's convinience. All they would need to do is include your JavaScript file and then they can:
65+
Why might you need `Vue-custom-element`? Simple, for your Vue components user's convenience. All they will need to do is include your JavaScript file and then they can:
6666

67-
* include HTML tag (e.g. `<my-component></my-component>`) in any time of document lifecycle. You can use your elements in e.g. SPA application just by including HTML tag - no Vue initialization or JavaScript usage is needed. Custom Elements will auto initialize when mounted into document. You can include them in e.g. Vue, Angular or React projects and browser will take care of detecting it and initialization
68-
* use simple API that allows for interacting with underlaying Vue instance by changing attributes, props or listening to events
67+
* include components as HTML tags (e.g. `<my-component></my-component>`) at any time of the document lifecycle. You can use your elements in e.g. SPA application just by including HTML tag - no Vue initialization or JavaScript usage is needed. Custom Elements will auto initialize when mounted into document. You can include them in e.g. Vue, Angular or React projects and browser will take care of detecting it and initialization
68+
* use a simple API that allows for interacting with underlaying Vue instance by changing attributes, props or listening to events
6969
* take advantage of features like lazy-loading, that allows for loading components on demand, only when user add them to document
7070

7171
### Features
7272

73-
* **Simplicity** - only `tag-name` and Vue component `object` is needed for `Vue.customElement()` usage
74-
* **Compatibility** - using optional polyfill we can support wide range of browsers, including IE9+, Android and IOS
73+
* **Simplicity** - only `tag-name` and Vue component `object` are needed for `Vue.customElement()` usage
74+
* **Compatibility** - using the optional polyfills a wide range of browsers is supported, including IE9+, Android and IOS
7575
* **Full featured** - you can use nesting, HMR, slots, lazy-loading, native Custom Elements callbacks.
7676
* reactive props and HTML attributes
7777
* automatic props casting (numbers, booleans) so they won't be available as strings but proper data types
7878
* listening to Vue component $emit'ed events
79-
* 'default' and 'named' slots are available for passing static content, check demo for example
79+
* 'default' and 'named' slots are available for passing static content, check out the demo for an example
8080
* Hot Module Replacement for seamless developer experience (unminimized build, Vue 2.x+)
81-
* lazy-loading - you can download component after it's attached to document. Useful for e.g. UI library authors. Check demo for example
82-
* detecting if detached callback is not invoked due to opening vue-custom-element in modal - element is then detached and attached to DOM again. It would be undesirable to destroy it immediately
83-
* **Custom Elements v1** - compatible with latest specification. Vue-custom-element will use native implementation if supported
81+
* lazy-loading - you can download a component after it's attached to document. Useful for e.g. UI library authors. Check out the demo for an example
82+
* detect if detached callback is not invoked due to opening vue-custom-element in modal - element is then detached and attached to DOM again. It would be undesirable to destroy it immediately
83+
* **Custom Elements v1** - compatible with latest specifications. Vue-custom-element will use native implementation if supported
8484

85-
Check demos site to see it in action.
85+
Check out the demo site to see it in action.
8686

8787
## Example
8888
For additional examples and detailed description check the demos page.
@@ -116,15 +116,15 @@ document.querySelector('widget-vue').prop2 = 'another string' // set prop value
116116
You can also change `<widget-vue>` HTML attributes and changes will be instantly reflected.
117117

118118

119-
## Browsers support
119+
## Browser support
120120

121121
| [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/firefox.png" alt="Firefox" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome.png" alt="Chrome" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari.png" alt="Safari" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/opera.png" alt="Opera" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari-ios.png" alt="iOS Safari" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>iOS | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome-android.png" alt="Chrome for Android" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Android |
122122
|:---------:|:---------:|:---------:|:---------:|:---------:|:---------:|
123123
| 59+ (--flag)| 54+ | 10.1+ | 42+ | 10.3+ | 55+
124124

125125
[Custom Elements v1 support](http://caniuse.com/#feat=custom-elementsv1)
126126

127-
#### With optional polyfill
127+
#### With optional polyfills
128128

129129
| [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/edge.png" alt="IE / Edge" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/firefox.png" alt="Firefox" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome.png" alt="Chrome" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari.png" alt="Safari" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/opera.png" alt="Opera" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari-ios.png" alt="iOS Safari" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>iOS | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome-android.png" alt="Chrome for Android" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Android |
130130
|:---------:|:---------:|:---------:|:---------:|:---------:|:---------:|:---------:|
@@ -196,21 +196,21 @@ Vue.customElement('my-element', MyElement, {
196196
});
197197
```
198198

199-
Callbacks are executed before lifecycle hooks from Vue component passed to Vue-custom-element. It's better idea just to use Vue component lifecycle hooks (e.g. `created`, `mounted`, `beforeDestroy`).
199+
Callbacks are executed before the lifecycle hooks from Vue component passed to Vue-custom-element. It's a better idea to just use Vue component lifecycle hooks (e.g. `created`, `mounted`, `beforeDestroy`).
200200

201201
## How does it work?
202202
![Vue-custom-element](demo/assets/images/vue-custom-element-schema.png)
203203

204-
Inside HTML tag of defined custom element, Vue-custom-element will create:
204+
Inside HTML tags of the defined custom element, Vue-custom-element will create:
205205

206206
* Proxy component for seamless Hot Module Replacement, using render function for performance (Vue 2.x+)
207-
* Vue component passed to Vue-custom-element
207+
* Vue component is passed to Vue-custom-element
208208

209209
Custom Element HTML tag will expose API to interact with underlying Vue component - you can change HTML attributes or props, using JavaScript.
210210

211211
## Testing
212212

213-
For advanced access, when exposed API is not enough, defined custom element will expose Vue instance via `getVueInstance()` method.
213+
For advanced access, when exposed API is not enough, defined custom element can expose Vue instance via `getVueInstance()` method.
214214

215215
```javascript
216216
console.info(document.querySelector('widget-vue').getVueInstance())

0 commit comments

Comments
 (0)