Question

我在聚合物3.0中有一个成分。当前仅支持Chrome版本67.0.3396.99。 Firefox 61.0.1给出错误TypeError：window.customElements未定义。

Edge出现以下错误：

SCRIPT5007：SCRIPT5007：无法获取财产   未定义或空引用的'polyfillWrapFlushCallback'

settings.js（15,14）。 SCRIPT5131：SCRIPT5131：功能不是   构造函数。

聚合物文档尚不清楚，也没有循序渐进的指南，没有任何问题。有人可以提供经过实践检验的步骤，以使Polymer 3.0组件在最新的浏览器以及IE11等较旧的浏览器中工作。

Answer 1

安装polyfills

npm install @webcomponents/webcomponentsjs

然后加载webcomponents-loader.js来检查并加载浏览器所需的任何polyfill。在index.html中，在对Web组件的任何引用之前添加以下内容：

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

希望这会对某人有所帮助！

Answer 2

我能够通过添加webcomponents-loader.js使其运行：

return (req, res, next) => {
  if(req.query.cookie && req.cookies.cookies_enabled)
    return res.redirect('https://yourdomain.io' + req.path)
  if(typeof(req.cookies.cookies_enabled) === 'undefined' && typeof(req.query.cookie) === 'undefined') {
    return res.cookie('cookies_enabled', true, {
      path: '/',
      domain: '.yourdomain.io',
      maxAge: 900000, 
      httpOnly: true,
      secure: process.env.NODE_ENV ? true : false
    }).redirect(req.url + '?cookie=1')
  }
  if(typeof(req.cookies.cookies_enabled) === 'undefined') {
    var target_page = 'https://yourdomain.io' + (req.url ? req.url : '')
    res.send('You must enable cookies to view this site.<br/>Once enabled, click <a href="' + target_page + '">here</a>.')
    res.end()
    return
  }
  next()
}

但是现在我需要找到一种将ES6 WebComponent转换为ES5以便使用

的方法。

 <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
                <script src="./components/subscriber-modal.js" type="module"></script>

运行已编译的组件。但是仅使用babel给定就不需要定义的错误。因此，将尝试使用browserify。

Answer 3

请注意，您必须同步加载webcomponents-loader.js，因此请确保不要在您的服务器中使用异步（在chrome中，异步可以很好地工作，但不能）。第一次遇到相同的问题，脚本如下：

(context n)

使Polymer 3.0元素向后兼容IE11和Firefox 56？

3 个答案: