Content-Length: 348734 | pFad | http://github.com/vuejs/vue-element/commit/6212354866a3e0d867fc3210ff1e34122410419f

3C support 0.12 & shadow dom · vuejs/vue-element@6212354 · GitHub
Skip to content
This repository was archived by the owner on Jan 18, 2022. It is now read-only.

Commit 6212354

Browse files
committed
support 0.12 & shadow dom
1 parent aaeee57 commit 6212354

File tree

6 files changed

+22
-7235
lines changed

6 files changed

+22
-7235
lines changed

README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ Register a real Custom Element using Vue.js.
55
## Requirements
66

77
- Only works with Vue ^0.11.0
8-
- The browser must support the Custom Element API (currently Chrome only), or you need to include Polymer's [platform.js polyfill](https://www.polymer-project.org/docs/start/platform.html).
8+
- The browser must support the Custom Element API (currently Chrome only), or you need to include the [Web Components polyfill](https://github.com/webcomponents/webcomponentsjs).
99

1010
## Installation
1111

@@ -28,6 +28,6 @@ Usage is the same as `Vue.component()` - you pass in exactly the same options as
2828

2929
- You don't need to manually instantiate a root level Vue instance. Custom Elements get auto-promoted when `document.registerElement` is called. You can also freely define the element before or after the markup.
3030

31-
- You can expose attributes with Vue's `paramAttributes` option. See the example folder to see it in action.
31+
- You can expose attributes with Vue's `props` (0.12) or `paramAttributes` (0.11) option. See the example folder to see it in action.
3232

33-
- This plugin uses *only* the Custom Elements API - it does not provide Shadow DOM encapsulation.
33+
- Be default the element does not use Shadow DOM. If you want to enable Shadow DOM encapsulation, pass in `shadow: true` in your component options.

example/example.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
<head>
44
<meta charset="utf-8">
55
<title>Vue.element example</title>
6-
<script src="platform.js"></script>
7-
<script src="vue-0.11.0-rc.js"></script>
6+
<script src="https://rawgit.com/webcomponents/webcomponentsjs/v0.6.1/webcomponents.min.js"></script>
7+
<script src="https://rawgit.com/yyx990803/vue/0.11.10/dist/vue.js"></script>
88
<script src="../vue-element.js"></script>
99
</head>
1010
<body>
@@ -19,11 +19,12 @@
1919
* except it's a real custom element (in supported browsers)
2020
*/
2121
Vue.element('my-element', {
22+
shadow: true,
2223
template:
2324
'<h1>This is a Vue custom element!</h1>' +
2425
'<h2>{{msg}}</h2>' +
2526
'<content></content>',
26-
paramAttributes: ['msg'],
27+
paramAttributes: ['msg'], // use `props` for Vue 0.12+
2728
data: function () {
2829
return {
2930
msg: 'default message'

example/platform.js

Lines changed: 0 additions & 17 deletions
This file was deleted.

0 commit comments

Comments
 (0)








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/vuejs/vue-element/commit/6212354866a3e0d867fc3210ff1e34122410419f

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy