custom-elements.md

./fixtures/-TEST/package/my-element.js:

class: SuperClass

Superclass

name	module	package
LitElement		lit-element

Methods

name	privacy	description	parameters	return	inheritedFrom
superClassMethod	public

Events

name	type	description	inheritedFrom
custom-event	SuperCustomEvent	this is custom

---

class: MyElement, my-element

Superclass

name	module	package
SuperClass	./fixtures/-TEST/package/my-element.js

Mixins

name	module	package
LocalizeMixin		lion
Mixin	./fixtures/-TEST/package/my-element.js

Fields

name	type	privacy	default	description	inheritedFrom
prop1		public
prop2		public
prop3	boolean	public	true
foo	string	private	'bar'	description goes here
mixinProp	number	protected	1		Mixin, ./fixtures/-TEST/package/my-element.js

Methods

name	privacy	description	parameters	return	inheritedFrom
instanceMethod	public	Some description of the method here	e: Event, a: String	void
superClassMethod	public				SuperClass, ./fixtures/-TEST/package/my-element.js

Events

name	type	description	inheritedFrom
my-event	Event
custom-event	SuperCustomEvent	this is custom	SuperClass, ./fixtures/-TEST/package/my-element.js

Attributes

name	fieldName	inheritedFrom
prop-1	prop1
prop2	prop2

CSS Properties

name	description
--background-color	Controls the color of bar

CSS Parts

name	description
bar	Styles the color of bar

Slots

name	description
container	You can put some elements here

---

mixin: Mixin

Superclass

name	module	package
klass	./fixtures/-TEST/package/my-element.js

Fields

name	type	privacy	default	description	inheritedFrom
mixinProp	number	protected	1

---

my-element.js

import { LitElement } from 'lit-element';
import { LocalizeMixin } from 'lion';

/**
 * @fires {SuperCustomEvent} custom-event - this is custom
 */
export class SuperClass extends LitElement {
  superClassMethod() {}
}
const Mixin = klass => class Mixin extends klass {
  /** @protected */
  mixinProp = 1;
}

/**
 * @slot container - You can put some elements here
 *
 * @cssproperty --background-color - Controls the color of bar
 *
 * @csspart bar - Styles the color of bar
 * 
 */
class MyElement extends LocalizeMixin(Mixin(SuperClass)) {
  static get properties() {
    return {
      prop1: { type: Boolean, attribute: 'prop-1'},
      prop2: { type: Boolean, reflect: true },
      prop3: { type: Boolean, attribute: false }
    }
  }

  /**
   * @private
   * @type {string} - description goes here
   */
  foo = 'bar';

  /**
   * Some description of the method here
   * @public
   * @param {Event} e 
   * @param {String} a - some description
   * @return void
   */
  instanceMethod(e, a) {
    this.dispatchEvent(new Event('my-event'));
  }

  constructor() {
    super();
    /** @type {boolean} */
    this.prop3 = true;
  }
}

customElements.define('my-element', MyElement);