如何在lit-lement中实现lit-element-bootstrap包

时间:2019-05-31 02:46:47

标签: javascript html css lit-element lit-html

我想用浅元素实现lit-element-bootstrap包。

我在控制台中遇到以下错误, Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec

//header.js
import { LitElement, html, css } from 'https://unpkg.com/@polymer/lit-element/lit-element.js?module';
import  'https://unpkg.com/lit-element-bootstrap@1.0.0-alpha.10/lit-element-bootstrap';

export class Header extends LitElement{
    constructor() {
        super();
    }
    render(){
        return html`
        <bs-alert primary>
         <div>A simple primary alert—check it out!</div>
        </bs-alert>
        `;
    }
}
customElements.define('header-element', Header);


//index.html

<!doctype html>
<html>
  <head>
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.7/webcomponents-bundle.js"></script>
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.7/webcomponents-loader.js"></script>
     <script type = "module" src = "../components/header.js"></script>
  </head>  
<body>   
<header-element></header-element>
 </body>
</html>


2 个答案:

答案 0 :(得分:0)

您尝试从中导入的URL被重定向(302)。

当前网址:https://unpkg.com/@polymer/lit-element/lit-element.js?module

尝试将其更改为: https://unpkg.com/@polymer/lit-element@0.7.1/lit-element.js?module

不知道是否应该始终从此URL加载它,可以下载文件并从目录导入它,而不是从此新URL下载它。由于这个新网址将来也可能会更改。

答案 1 :(得分:0)

lit-element已更新,正确的链接应为https://unpkg.com/lit-element 或者如果您想指定扩展名 https://unpkg.com/lit-element/lit-element.js