https://github.com/preignition/preignition-mixin
lit-element mixins used in preignition
https://github.com/preignition/preignition-mixin
Last synced: 12 months ago
JSON representation
lit-element mixins used in preignition
- Host: GitHub
- URL: https://github.com/preignition/preignition-mixin
- Owner: preignition
- License: mit
- Created: 2019-09-02T03:58:41.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T08:43:45.000Z (over 3 years ago)
- Last Synced: 2025-07-09T14:12:19.909Z (about 1 year ago)
- Language: JavaScript
- Size: 1.32 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# \
Series of helper mixin while developping Preignition with lit-element:
- DoNotSetUndefinedValue: prevent property setting when value is undefined. This is usefull for not overriding child components default values when parent have not set those properties.
- SelectMixin: use d3-selection in component shadowRoot
- DefaultValueMixin: allow to declare default values in properties (similar to Polymer)
- RelayTo: allow to automatically relay properties from parent to child, without declaring the binding in template.
- CacheId: cache element having an `id` under `this.$`for easier reference. Usage borrowed from Polymer.
This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
## Installation
```bash
npm i preignition-mixin
```
## Usage
### defaultValueMixin
```js
import { DefaultValueMixin } from '@preignition/preignition-mixin';
class DefaultElement extends defaultValueMixin(TestElement) {
static get properties() {
return {
value: {type: String, value: 'test'}
};
}
}
```
### selectMixin
```js
import { SelectMixin } from '@preignition/preignition-mixin';
class SelectElement extends selectMixin(TestElement) {
}
window.customElements.define('select-element', SelectElement);
const el = html``;
const title = el.selectShadow('#title')
```
## Testing using karma (if applied by author)
```bash
npm run test
```