# Aurelia 2 binding to custom element from npm package
**URL:** https://discourse.aurelia.io/t/aurelia-2-binding-to-custom-element-from-npm-package/4383
**Category:** Uncategorized
**Created:** [August 24, 2021, 10:28pm UTC](https://discourse.aurelia.io/t/aurelia-2-binding-to-custom-element-from-npm-package/4383 "2021-08-24T22:28:53Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@tsoiland](https://discourse.aurelia.io/u/tsoiland)
#### Post date: [August 24, 2021, 10:28pm UTC](https://discourse.aurelia.io/t/aurelia-2-binding-to-custom-element-from-npm-package/4383/1 "2021-08-24T22:28:53Z")
The following custom element’s binding works if it is located in the application repo, but not if it is located in an npm package. Are there any example npm packages with working bindings I can look at? Or are there any known issues around this?
```auto
import {bindable, customElement} from 'aurelia';
@customElement({name: 'test-element3'})
export class TestElement3 {
@bindable testfield;
attached() {
console.log("bound value3 is: " + this.testfield);
}
}
```
---
### Author:  [@bigopon](https://discourse.aurelia.io/u/bigopon)
#### Post date: [August 27, 2021, 8:07am UTC](https://discourse.aurelia.io/t/aurelia-2-binding-to-custom-element-from-npm-package/4383/2 "2021-08-27T08:07:18Z")
@tsoiland did you see any errors? Can you paste it here? Also, what does the dist look like? Both html & js, or all in 1?
---
### Author:  [@tsoiland](https://discourse.aurelia.io/u/tsoiland)
#### Post date: [August 27, 2021, 11:17pm UTC](https://discourse.aurelia.io/t/aurelia-2-binding-to-custom-element-from-npm-package/4383/3 "2021-08-27T23:17:02Z")
@bigopon no errors that I can find.
Dist of npm package has following files:
> **test-element3.html**
>
> ```auto
>
>
>
> ```
> **test-element3.js (after babel)**
>
> ```auto
> (function (global, factory) {
> if (typeof define === "function" && define.amd) {
> define(['exports', 'aurelia'], factory);
> } else if (typeof exports !== "undefined") {
> factory(exports, require('aurelia'));
> } else {
> var mod = {
> exports: {}
> };
> factory(mod.exports, global.aurelia);
> global.testElement3 = mod.exports;
> }
> })(this, function (exports, _aurelia) {
> 'use strict';
>
> exports.__esModule = true;
> exports.TestElement3 = undefined;
>
> function _initDefineProp(target, property, descriptor, context) {
> if (!descriptor) return;
> Object.defineProperty(target, property, {
> enumerable: descriptor.enumerable,
> configurable: descriptor.configurable,
> writable: descriptor.writable,
> value: descriptor.initializer ? descriptor.initializer.call(context) : void 0
> });
> }
>
> function _classCallCheck(instance, Constructor) {
> if (!(instance instanceof Constructor)) {
> throw new TypeError("Cannot call a class as a function");
> }
> }
>
> function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
> var desc = {};
> Object['ke' + 'ys'](descriptor).forEach(function (key) {
> desc[key] = descriptor[key];
> });
> desc.enumerable = !!desc.enumerable;
> desc.configurable = !!desc.configurable;
>
> if ('value' in desc || desc.initializer) {
> desc.writable = true;
> }
>
> desc = decorators.slice().reverse().reduce(function (desc, decorator) {
> return decorator(target, property, desc) || desc;
> }, desc);
>
> if (context && desc.initializer !== void 0) {
> desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
> desc.initializer = undefined;
> }
>
> if (desc.initializer === void 0) {
> Object['define' + 'Property'](target, property, desc);
> desc = null;
> }
>
> return desc;
> }
>
> function _initializerWarningHelper(descriptor, context) {
> throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.');
> }
>
> var _dec, _class, _desc, _value, _class2, _descriptor;
>
> var TestElement3 = exports.TestElement3 = (_dec = (0, _aurelia.customElement)({ name: 'test-element3' }), _dec(_class = (_class2 = function () {
> function TestElement3() {
> _classCallCheck(this, TestElement3);
>
> _initDefineProp(this, 'testfield', _descriptor, this);
> }
>
> TestElement3.prototype.attached = function attached() {
> console.log("bound value3 is: " + this.testfield);
> };
>
> return TestElement3;
> }(), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'testfield', [_aurelia.bindable], {
> enumerable: true,
> initializer: null
> })), _class2)) || _class);
> });
> //# sourceMappingURL=test-element3.js.map
>
> ```
---
### Author:  [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)
#### Post date: [August 29, 2021, 12:12am UTC](https://discourse.aurelia.io/t/aurelia-2-binding-to-custom-element-from-npm-package/4383/4 "2021-08-29T00:12:35Z")
An au2 plugin npm package needs to be pre-compiled just like the app.
The app only consumes pre-compiled npm package. We have not shipped skeleton to create au2 plugin yet.
We cannot compile html file inside npm package. This is actually designed to allow au2 plugin package to lock their compiling option (shadow-dom or css-module). So that user app’s compiling option would not affect how the au2 plugin is compiled, so that the plugin behaves same in app’s with various compiling options.
---
### Author:  [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)
#### Post date: [August 29, 2021, 12:20am UTC](https://discourse.aurelia.io/t/aurelia-2-binding-to-custom-element-from-npm-package/4383/5 "2021-08-29T00:20:19Z")
I will get some plugin skeleton up soon (in a day or two).
---
### Author:  [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)
#### Post date: [August 29, 2021, 6:45am UTC](https://discourse.aurelia.io/t/aurelia-2-binding-to-custom-element-from-npm-package/4383/6 "2021-08-29T06:45:40Z")
An early WIP plugin skeleton.
>
>
> This is ready for early testing. Use:
>
> npx makes aurelia/new#plugin-skelet…on
>
> Then either choose a default plugin or customise a plugin. The result project has some explanation in readme file on how to consume the plugin.
>
> Known issue:
> If plugin project is compiled using non-shadow-dom setup, the style applied to the custom element inside the plugin would NOT work properly in app built with shadow-dom.
>
> For example, in app's \`my-app.html\` template, you try to use an custom-element provided by a plugin
> \`\`\`html
>
> \