The changes you made to start using the scoped custom element registry (according to <

We can create a little mixin to do that: <div class="highlight highlight-source-js

you are still relying on mwc elementes to be defined globally by HA about boilerplate-card HOT 7 OPEN

custom-cards commented on July 20, 2024 1

you are still relying on mwc elementes to be defined globally by HA

from boilerplate-card.

Comments (7)

regevbr commented on July 20, 2024 1

The idea is that the custom card only has 1 custom registry, not every element. By passing the registry of the host down we make sure they all share the same registry.

There really isn't much magic going on, and by creating a mixin like I did here #52 (comment) I don't think it is verbose at all?

I see your point, but you are creating a "global" registry just for the card. There can still be conflicts between elements when you do that, if, for example, you use a couple of libraries.
I prefer the encapsulations of my method, but they both work, so it is just a question of style.

from boilerplate-card.

iantrich commented on July 20, 2024

I don't have much input on this as it was not my addition.

CC @zsarnett @bramkragten

Any input?

Thanks

from boilerplate-card.

regevbr commented on July 20, 2024

BTW, if you do decide to "allow" the usage of HA elements, there is a need for a custom mechanism to allow that, as some HA elements are lazy-loaded (specifically the ones available in the config flow and the ones described here). I applied such a mechanism in the mentioned repo above, if you want to discuss it further, have a look here

from boilerplate-card.

bramkragten commented on July 20, 2024

Right, we have to pass the registry of the host down to the mwc-elements, this is a way to do that:

class CustomCard extends ScopedRegistryHost(LitElement) {
  static get elementDefinitions() {
    return {
      ...textfieldDefinition(CustomCard),
    };
  }
  
  ....
  
}

export const textfieldDefinition = (registryHost) => ({
  "mwc-notched-outline": class extends NotchedOutlineBase {
    static get styles() {
      return notchedOutlineStyles;
    }
  },
  "mwc-textfield": class extends TextFieldBase {
    static get shadowRootOptions() {
      return {
        ...super.shadowRootOptions,
        customElements: registryHost.registry,
      };
    }
    createRenderRoot() {
      return (this.renderOptions.creationScope = super.createRenderRoot());
    }
    static get styles() {
      return textfieldStyles;
    }
  },
});

from boilerplate-card.

bramkragten commented on July 20, 2024

We can create a little mixin to do that:

export function ScopedRegistryChild(superclass) {
  return class ScopedRegistryChildMixin extends superclass {
    static get shadowRootOptions() {
      return {
        ...super.shadowRootOptions,
        customElements: this.registryHost.registry,
      };
    }

    createRenderRoot() {
      return (this.renderOptions.creationScope = super.createRenderRoot());
    }
  };
}

Usage:

  "mwc-textfield": class extends ScopedRegistryChild(TextFieldBase) {
    static get registryHost() {
      return registryHost;
    }
    static get styles() {
      return textfieldStyles;
    }
  },

Could also pass the styles and host to the mixin function, to make it even simpler:

  "mwc-textfield": ScopedRegistryChild(TextFieldBase, textfieldStyles, registryHost),

export function ScopedRegistryChild(superclass, styles, registryHost) {
  return class ScopedRegistryChildMixin extends superclass {
    static get shadowRootOptions() {
      return {
        ...super.shadowRootOptions,
        customElements: registryHost.registry,
      };
    }

    static get styles() {
      return styles;
    }

    createRenderRoot() {
      return (this.renderOptions.creationScope = super.createRenderRoot());
    }
  };
}

from boilerplate-card.

regevbr commented on July 20, 2024

This seems very verbose and plays too much with the internals. Also, it still doesn't support multi nested elements.

How about this:

import { ScopedRegistryHost } from '@lit-labs/scoped-registry-mixin';
import { ListBase } from '@material/mwc-list/mwc-list-base';
import { styles as listStyles } from '@material/mwc-list/mwc-list.css';
import buildElementDefinitions from '../buildElementDefinitions';
import MwcListItem from './list-item';

export default class MwcList extends ScopedRegistryHost(ListBase) {
  static get defineId() { return 'mwc-list'; }

  static get elementDefinitions() {
    return buildElementDefinitions([MwcListItem], MwcList);
  }

  static get styles() {
    return listStyles;
  }
}

import { ScopedRegistryHost } from '@lit-labs/scoped-registry-mixin';
import { ListItemBase } from '@material/mwc-list/mwc-list-item-base';
import { styles as listItemStyles } from '@material/mwc-list/mwc-list-item.css';
import buildElementDefinitions from '../buildElementDefinitions';
import MwcRipple from './ripple';

export default class MwcListItem extends ScopedRegistryHost(ListItemBase) {
  static get defineId() { return 'mwc-list-item'; }

  static get elementDefinitions() {
    return buildElementDefinitions([MwcRipple], MwcListItem);
  }

  static get styles() {
    return listItemStyles;
  }
}

import { RippleBase } from '@material/mwc-ripple/mwc-ripple-base';
import { styles as rippleStyles } from '@material/mwc-ripple/mwc-ripple.css';
import { ScopedRegistryHost } from '@lit-labs/scoped-registry-mixin';
import buildElementDefinitions from '../buildElementDefinitions';

export default class MwcRipple extends ScopedRegistryHost(RippleBase) {
  static get defineId() { return 'mwc-ripple'; }

  static get elementDefinitions() {
    return buildElementDefinitions([], MwcRipple);
  }

  static get styles() {
    return rippleStyles;
  }
}

const buildElementDefinitions = (elements, constructor) => elements.reduce((aggregate, element) => {
  if (element.defineId) {
    // eslint-disable-next-line no-param-reassign
    aggregate[element.defineId] = element;
  } else {
    element.promise.then((clazz) => {
      if (constructor.registry.get(element.name) === undefined) {
        constructor.registry.define(element.name, clazz);
      }
    });
  }
  return aggregate;
}, {});

export default buildElementDefinitions;

here we define (and encapsulate) each element direct children within itself. No magic.
Also if you want to use elements from the global registry (like HA elements) that will be loaded at an unknown time, you can use it like this:

const globalElementLoader = name => ({
  name,
  promise: customElements.whenDefined(name).then(() => customElements.get(name)),
});

export default globalElementLoader;

...
  static get elementDefinitions() {
    return buildElementDefinitions([
      globalElementLoader('ha-card'),
      globalElementLoader('more-info-light'),
      globalElementLoader('ha-switch'),
      globalElementLoader('ha-icon'),
      globalElementLoader('ha-slider'),
      globalElementLoader('ha-color-picker'),
      MwcSelect,
      MwcListItem,
    ], LightEntityCard);
  }
,..

from boilerplate-card.

bramkragten commented on July 20, 2024

The idea is that the custom card only has 1 custom registry, not every element. By passing the registry of the host down we make sure they all share the same registry.

There really isn't much magic going on, and by creating a mixin like I did here #52 (comment) I don't think it is verbose at all?

from boilerplate-card.

you are still relying on mwc elementes to be defined globally by HA about boilerplate-card HOT 7 OPEN

Comments (7)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent