predixdesignsystem / px-breadcrumbs

https://www.predix-ui.com/#/elements/px-breadcrumbs
Apache License 2.0
0 stars 2 forks source link

Breadcumbs doesn't work for dynamc import #13

Closed shinxi closed 7 years ago

shinxi commented 7 years ago

px-breadcrumbs won't work for dynamic import. See Uncaught TypeError: Cannot read property 'Breadcrumbs' of undefined at console.

    <div id="test">
    </div>
    <script>
    const loadedBowerComponents = [];
    function loadBowerComponent(bowerPath, componentName) {
      if (loadedBowerComponents.indexOf(componentName) > -1) {
        return;
      }
      const link = document.createElement('link');
      link.rel = 'import';
      link.href = `bower_components/${bowerPath}`;
      document.head.appendChild(link);
      loadedBowerComponents.push(componentName);
    }
    setTimeout(function() {
      loadBowerComponent("px-breadcrumbs/px-breadcrumbs.html", "px-breadcrumbs");
      var test = document.getElementById("test")
      test.innerHTML = '<px-breadcrumbs items=\'[{"label":"North America","id":"North America","children":[{"label":"United States of America","id":"United States of America","children":[{"label":"California","id":"California","children":[{"label":"Alameda","id":"Alameda"},{"label":"Albany","id":"Albany"},{"label":"Alhambra","id":"Alhambra"},{"label":"Brentwood","id":"Brentwood"},{"label":"Burlingame","id":"Burlingame"},{"label":"Calistoga","id":"Calistoga"},{"label":"Concord","id":"Concord"},{"label":"Danville","id":"Danville"},{"label":"Emeryville","id":"Emeryville"},{"label":"Fresno","id":"Fresno"},{"label":"Gilroy","id":"Gilroy"},{"label":"Hayward","id":"Hayward"},{"label":"Oakland","id":"Oakland"},{"label":"San Francisco","id":"San Francisco"},{"label":"San Ramon","id":"San Ramon","children":[{"label":"Crow Canyon Gardens","id":"Crow Canyon Gardens"},{"label":"Old Ranch Park","id":"Old Ranch Park"},{"label":"Valley View Park","id":"Valley View Park"}]}]},{"label":"Colorado","id":"Colorado"},{"label":"Delaware","id":"Delaware"},{"label":"Florida","id":"Florida"}]}]},{"label":"South America","id":"South America"}]\' selected-route=\'["North America","United States of America","California","San Ramon","Crow Canyon Gardens"]\'></px-breadcrumbs>';
    }, 1000)
    </script>

Expected behavior and actual behavior:

px-breadcrumbs works with dynamic import.

Steps to reproduce the problem:

https://codepen.io/anon/pen/VrevZL

Environment (component version number, Browser (including version), operating system, hardware, etc):

px-progress-bar: ^1.0.8 polymer: ^1.9.1 px-dropdown: ^4.0.17 Browser: Google Chrome 61.0.3163.100 operating system: macOS Sierra 10.12.6

Screenshots (optional, but very helpful):

image image

Code examples

https://codepen.io/anon/pen/VrevZL