Import html page from custom state card

Development
1

I am trying to import a bundled react app / html file in my custom_ui polymer card. Here is what I have so far:

www/custom_ui/state-card-freesat-remote.html

<dom-module id="state-card-freesat-remote">
  <template>
    <link rel="import" href="freesat_remote/index.html">
  </template>
</dom-module>

<script>
  Polymer({
    is: 'state-card-freesat-remote',
    properties: {
      hass: {
        type: Object,
      },
      stateObj: {
        type: Object,
      },
    },
  });
</script>

configuration.yaml

frontend:
  javascript_version: latest
  themes: !include_dir_merge_named themes/
  extra_html_url:
    - /local/custom_ui/state-card-floorplan.html
    - /local/custom_ui/state-card-freesat-remote.html

customization.yaml

binary_sensor.freesat_remote:
  custom_ui_state_card: state-card-freesat-remote

I think I have it all set up correctly but all I get is a empty card.

2

The CSS isn’t broken in the iframe git. Because iframes are a bit finicky to work with regarding scaling and we have predefined sizes for the state cards, I had to do some tricks to fit most things in the available space.
Some websites simply don’t allow embedding. Maybe that is also your problem. Also try to assign your “link” to an existent div. It might be appended in the wrong place now.