How to use the @material/mwc-base/component-element.js.MDCWebComponentMixin function in @material/mwc-base

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {ComponentElement, html, MDCWebComponentMixin} from '@material/mwc-base/component-element.js';
import {MDCMenu, Corner} from '@material/menu';
import {style} from './mwc-menu-css.js';

// this element depend on the `mwc-list-item` and `mwc-list-item-separator`
// elements to be registered ahead of time
import '@material/mwc-list/mwc-list-item.js';
import '@material/mwc-list/mwc-list-item-separator.js';

export class MDCWCMenu extends MDCWebComponentMixin(MDCMenu) {
  get items() {
    return this.host.items;
  }

  get listItems() {
    return this.items.map((e) => e.listItem);
  }

  get anchor() {
    const parent = this.host.parentNode;
    if (parent.matches('mdc-menu-anchor')) {
      return parent;
    }
  }

  createAdapter() {

You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {ComponentElement, MDCWebComponentMixin, html} from '@material/mwc-base/component-element.js';
import {classString as c$} from '@polymer/lit-element/lit-element.js';
import {style} from './mwc-chip-set-css.js';
import {MDCChipSet} from '@material/chips';

export class MDCWCChipSet extends MDCWebComponentMixin(MDCChipSet) {
  get chips() {
    return Array.from(this.host.chips).map((e) => e._component);
  }

  // override
  set chips(value) {}
}

export class ChipSet extends ComponentElement {
  static get ComponentClass() {
    return MDCWCChipSet;
  }

  static get componentSelector() {
    return '.mdc-chip-set';
  }

you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {ComponentElement, MDCWebComponentMixin, html} from '@material/mwc-base/component-element.js';
import {style} from './mwc-linear-progress-css.js';
import {MDCLinearProgress} from '@material/linear-progress';

export class MDCWCLinearProgress extends MDCWebComponentMixin(MDCLinearProgress) {}

export class LinearProgress extends ComponentElement {
  static get ComponentClass() {
    return MDCWCLinearProgress;
  }

  static get componentSelector() {
    return '.mdc-linear-progress';
  }

  static get properties() {
    return {
      determinate: {type: Boolean},
      progress: {type: Number},
      buffer: {type: Number},
      reverse: {type: Boolean},

You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {ComponentElement, MDCWebComponentMixin, html} from '@material/mwc-base/component-element.js';
import {style} from './mwc-chip-css.js';
import {MDCChip} from '@material/chips';
import '@material/mwc-icon/mwc-icon-font.js';

export class MDCWCChip extends MDCWebComponentMixin(MDCChip) {}

export class Chip extends ComponentElement {
  static get ComponentClass() {
    return MDCWCChip;
  }

  static get componentSelector() {
    return '.mdc-chip';
  }

  static get properties() {
    return {
      leadingIcon: {type: String},
      trailingIcon: {type: String},
      label: {type: String},
      active: {type: Boolean},

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {ComponentElement, html, MDCWebComponentMixin} from '@material/mwc-base/component-element.js';
import {callWhenReady, findAssignedNode,} from '@material/mwc-base/utils.js';
import {classString} from '@polymer/lit-element/render-helpers.js';
import {style} from './mwc-formfield-css.js';
import {MDCFormField} from '@material/form-field';

export class MDCWCFormField extends MDCWebComponentMixin(MDCFormField) {};


export class Formfield extends ComponentElement {
  static get ComponentClass() {
    return MDCWCFormField;
  }

  static get componentSelector() {
    return '.mdc-form-field';
  }

  static get properties() {
    return {
      label: {type: String},
      alignEnd: {type: Boolean},
    };

You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {ComponentElement, MDCWebComponentMixin, html} from '@material/mwc-base/component-element.js';
import {style} from './mwc-icon-toggle-css.js';
import {MDCIconToggle} from '@material/icon-toggle';
import '@material/mwc-icon/mwc-icon-font.js';

export class MDCWCIconToggle extends MDCWebComponentMixin(MDCIconToggle) {}

export class IconToggle extends ComponentElement {
  static get ComponentClass() {
    return MDCWCIconToggle;
  }

  static get componentSelector() {
    return '.mdc-icon-toggle';
  }

  static get properties() {
    return {
      disabled: {type: Boolean},
      on: {type: Boolean},
      icon: {type: String},
      offIcon: {type: String},

you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {ComponentElement, MDCWebComponentMixin, html} from '@material/mwc-base/component-element.js';
import {style} from './mwc-snackbar-css.js';
import {MDCSnackbar} from '@material/snackbar';

export class MDCWCSnackbar extends MDCWebComponentMixin(MDCSnackbar) {}

export class Snackbar extends ComponentElement {
  static get ComponentClass() {
    return MDCWCSnackbar;
  }

  static get componentSelector() {
    return '.mdc-snackbar';
  }

  static get properties() {
    return {
      message: {type: String},
      timeout: {type: Number},
      multiline: {type: Boolean},
      actionText: {type: String},

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {ComponentElement, MDCWebComponentMixin, html} from '@material/mwc-base/component-element.js';
import {MDCDialog} from './mdc-dialog.js';
import {style} from './mwc-dialog-css.js';
import 'wicg-inert/dist/inert.js';
import 'blocking-elements/blocking-elements.js';

export class MDCWCDialog extends MDCWebComponentMixin(MDCDialog) {
  createAdapter() {
    return {
      trapFocusOnSurface: () => {
        this.trapFocus(this.acceptButton_);
      },
      untrapFocusOnSurface: () => {
        this.untrapFocus();
      },
    };
  }

  trapFocus(element) {
    document.$blockingElements.push(this.host);
    element.focus();
  }