vue-element - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

README.md

+# Vue.element plugin
+
+Register a real Custom Element using Vue.js.
+
+## Requirements
+
+- Only works with Vue ^0.11.0
+- 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).
+
+## Installation
+
+Available through npm, Component, Duo or Bower.
+
+### Direct include
+
+If you are using Vue globally, just include `vue-element.js` and it will automatically install the `Vue.element` method.
+
+### CommonJS
+
+``` js
+Vue.use(require('vue-element')) // installed
+Vue.element('my-element', { /* ... */ })
+```
+
+## Usage
+
+Usage is the same as `Vue.component()` - you pass in exactly the same options as if you are defining a Vue component. A few things to note:
+
+- 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.
+
+- You can expose attributes with Vue's `props` (0.12) or `paramAttributes` (0.11) option. See the example folder to see it in action.
+
+- 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.

package.json

 {
   "name": "vue-element",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "register a custom element with Vue.js.",
@@ -5,0 +5,0 @@ "main": "vue-element.js",

vue-element.js

@@ -14,6 +14,6 @@ (function () {
       // Handle param attributes
-      var params = options.paramAttributes || []
-      var paramsHash = Object.create(null)
-      params.forEach(function (name) {
-        paramsHash[name] = true
+      var props = options.props || options.paramAttributes || []
+      var propsHash = Object.create(null)
+      props.forEach(function (name) {
+        propsHash[name] = true
         Object.defineProperty(p, name, {
@@ -29,3 +29,3 @@ get: function () {
       p.attributeChangedCallback = function (name, oldVal, newVal) {
-        if (paramsHash[name]) {
+        if (propsHash[name]) {
           this.__vue__[name] = newVal
@@ -37,3 +37,11 @@ }
       p.createdCallback = function () {
-        new VM({ el: this })
+        var vm = new VM({
+          el: this
+        })
+        if (options.shadow) {
+          var shadow = this.createShadowRoot()
+          while (this.firstChild) {
+            shadow.appendChild(this.firstChild)
+          }
+        }
       }
@@ -40,0 +48,0 @@ // register element

Fixed alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3447

75.51%

Number of package files

3

50%

Lines of code

56

16.67%

Number of medium quality alerts

1

-50%

Number of lines in readme file

33

Infinity%

No dependency changes