个人中心
gpt4 book ai didi

firefox - Shadow DOM v1 CSS polyfill

转载 作者：行者123 更新时间：2023-12-04 20:33:24 24 4
gpt4 key购买 nike

https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom

这让我很兴奋，我可以在没有聚合物的情况下从头开始编写自己的自定义网页。

才发现css :host例如在 Edge 和 FireFox 中不起作用。我可以不用 html 处理 import现在直到 w3c 弄清楚他们想用 es6 模块做什么，但是每个浏览器都有自己的一半实现了没有 css 的 Shadow DOM 版本，这让我按下了按钮。

所以我仍然需要一个完整的聚合物堆栈来在所有浏览器中拥有 web 组件。
<script src="../webcomponentsjs/webcomponents-lite.js"></script><link rel="import" href="../hello-world.html"><hello-world>Hello World Polymer 2.x</hello-world>
有谁知道如何填充 Edge 和 FireFox 以拥有一个真正的 Shadow DOM，而不是假装的原生 Shadow DOM？

这是我尝试过的，但我不知道如何告诉 Edge 和 FireFox 将他们的影子崇拜者放在其他地方并使用 shadydom/shadycss。

https://jsbin.com/quvozo

<!DOCTYPE html>
<html>

<head>
  <title>Components</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
</head>

<body>
  <hello-world>Hello World ES2015</hello-world>
  <script>
    function loadScript(src, main) {
      return new Promise(function(resolve, reject) {
        const script = document.createElement('script');
        script.async = true;
        script.src = src;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
      });
    }
    let polyfilled = false;
    const loadPromises = [];
    if (!('customElements' in window)) {
      loadPromises.push(loadScript('https://raw.githubusercontent.com/webcomponents/custom-elements/master/custom-elements.min.js'));
    }
    if (!HTMLElement.prototype.attachShadow) {
      polyfilled = true
      loadPromises.push(loadScript('https://raw.githubusercontent.com/webcomponents/shadydom/master/shadydom.min.js'));
      loadPromises.push(loadScript('https://raw.githubusercontent.com/webcomponents/shadycss/master/shadycss.min.js'));
    }
    Promise.all(loadPromises)
      .then(e => console.log(`polyfilled ${polyfilled}`))
      .then(e => {
        class HelloWorld extends HTMLElement {
          constructor() {
            super()
            this.template = document.createElement('template')
            this.template.innerHTML = `
              <style>
                :host {
                  display: block;
                  box-sizing: border-box;
                  border: 1px solid red;
                  margin-top: 10px;
                  padding: 0px 5px;
                }
              </style>
              <p>Test <slot></slot></p>
            `
            if (polyfilled) ShadyCSS.prepareTemplate(this.template, 'hello-world');
          }
          connectedCallback() {
            const shadowRoot = this.attachShadow({ mode: 'open' })
            shadowRoot.appendChild(this.template.content.cloneNode(true))
            if (polyfilled) ShadyCSS.applyStyle(this);
          }
        }
        customElements.define('hello-world', HelloWorld)
      })
  </script>
</body>

</html>

最佳答案

  • Shadow DOM polyfill 不会创建真正的 Shadow DOM，而是创建普通的 DOM 元素，
  • 自定义元素规范 won't allow you在 constructor() 中的普通 DOM 树中添加元素,

    • 因此，您应该 attach之后的假 Shadow DOM，即在 connectedCallback() 内方法，而不是在 constructor() 中方法。

    ShadyCSS polyfill 适用于 Edge 和 Firefox。

    关于firefox - Shadow DOM v1 CSS polyfill，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40601142/

    24 4 0
    文章推荐： Docker-compose 无法运行 jar 文件，但可以使用 Dockerfile
    文章推荐： jestjs - 如何使用 enzyme 测试事件处理程序
    文章推荐： php - 代码使用的执行时间和内存
    文章推荐： xcode - 如何设置每 10 次触发一次 LLDB 断点？
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com