小编Oll*_*ams的帖子

我正在创建一个可共享的 React 组件库。

该库包含许多组件，但最终用户可能只需要使用其中的几个。

当您将代码与 Webpack（或 Parcel 或 Rollup）捆绑在一起时，它会创建一个包含所有代码的文件。

出于性能原因，除非实际使用，否则我不希望浏览器下载所有代码。我认为我不应该捆绑组件是否正确？捆绑是否应该留给组件的消费者？我是否将其他任何东西留给组件的消费者？我只是转译 JSX 就这样吗？

如果同一个 repo 包含许多不同的组件，那么 main.js 中应该包含什么？

“如何使用 javascript 检测表情符号”问题的最佳答案Extended_Pictographic使用.

Emoji_PresentationDavid Walsh在这篇博文中提到了。

我正在尝试使某些文本项目停止与深色背景重叠，当用户滚动时，它们将逐一改变颜色。所有的文本项都是position: fixed

编辑：MDN 文档说（强调我的）：

Intersection Observer API 提供了一种异步观察目标元素与祖先 元素交集变化的方法

我认为这意味着没有办法解决我的问题，因为我要监视重叠的元素不是root我在选项对象中指定的元素的子元素。

如果重叠元素不是另一个元素的子元素，有没有办法检测重叠？

if ('IntersectionObserver' in window) {

    const options = {
        root: document.getElementById('flow-landing'),
        rootMargin: '0px',
        threshold: 0
      }


    var callback = function(entries, observer) { 
            entries.forEach(entry => {

                if (entry.isIntersecting) {
                    entry.target.style.color = "white";
                }
                else {
                    entry.target.style.color = null;
                }
            });
          };

    const observer = new IntersectionObserver(callback, options);

    var targets = [Array.from(document.querySelectorAll('.social-item')), Array.from(document.querySelectorAll('.additional-item'))].flat();

    targets.forEach(target => 
        observer.observe(target));
}

没有任何控制台错误，但代码没有做任何事情。

当所需的表单输入为空或无效时，大多数浏览器都会显示默认错误消息（Safari 是一个明显的例外）。我喜欢这些消息的样式，所以与其创建我自己的样式，我更愿意显示浏览器默认设置。这些默认消息的显示方式有以下三种：

• 用户尝试提交表单
• 您以编程方式单击表单的提交按钮
• 你用 reportValidity()

reportValidity() 模糊很容易：

var form = document.forms[0];
var inputs = form.querySelectorAll("input");

inputs.forEach((input) => input.addEventListener("blur", function() {
    input.reportValidity();
}))

的行为因reportValidity()浏览器而异。Chrome 显示错误消息，但也有令人难以置信的非用户友好效果，将光标困在错误的输入元素内 - 单击另一个输入或使用 Tab 键没有效果，这是一种糟糕的用户体验。Chrome 还会显示源顺序中最早的无效输入字段的错误消息。Firefox（在 Nightly 上测试）具有我想要的仅显示相关输入的错误消息的行为，并且不会捕获用户光标。

有没有办法显示发生模糊事件的输入字段的错误消息（在所有具有默认错误消息的浏览器上）？

我正在获取一个 img，将其转换为一个文件，然后尝试共享该文件。我在 Android 上的最新 Chrome（目前唯一支持此 API 的浏览器）上测试了代码。

  if (shareimg && navigator.canShare) {
    share = async function() {
      const response = await fetch(shareimg);
      const blob = await response.blob();
      const file = await new File([blob], "image.jpeg");

      navigator.share({
        url: shareurl,
        title: sharetitle,
        text: sharetext,
        files: [file]
      });
    };
  }

我正在运行该功能以响应用户单击按钮（必须从用户手势调用 share() 方法，否则它将不起作用）。

（我正在使用 Browserstack 测试此代码，它为 javascript 错误提供了一个控制台，因为我无法成功地将我的 Android 设备链接到我的 mac 进行调试，并且此 API 仅适用于手机 - 而不适用于桌面版 Chrome。）

我收到 sass 错误：声明只能在样式规则中使用。

   \xe2\x95\xb7\n32 \xe2\x94\x82     #{$property}: $value;\n   \xe2\x94\x82     ^^^^^^^^^^^^^^^^^^^^\n

对于以下文件：

@mixin theme($colour, $texture: null) {\n  $theme: map-get-strict($themes, $colour, "theme");\n\n  @if ($texture) {\n    @include getTexture($texture);\n  }\n\n  @each $property, $value in $theme {\n    #{$property}: $value;\n  }\n}\n

这是使用 dart-sass。

我认为这可能是导致问题的 Sass 测试文件，例如：

@include it('outputs the light-blue theme') {\n    @include assert {\n      @include output {\n        @include theme(light-blue);\n      }\n\n      @include expect {\n        background-color: getColour(light-blue);\n        color: getColour(black);\n      }\n    }\n  }\n

我已经注册了一个 service worker。到目前为止，我只显式缓存了非常少量的静态资源（一个样式表和几个图像）。当我转到 Chrome devtools 的应用程序选项卡时，正如预期的那样，它们在缓存存储中。

让我感到困惑的是，在“网络”选项卡中，有些东西说“来自磁盘缓存”（这是我所期望的），但除我的缓存存储中的资源之外的许多资源都说“来自 ServiceWorker”。Service Worker 会自动缓存一些东西吗？

对于以下代码，我收到错误“声明名称与内置全局标识符‘globalThis’冲突”

interface globalThis {
    whatever: string
}

为什么我可以做

 interface Window {
    whatever: string
 }

但不对 globalThis 做同样的事情？

我用普通的 html/css/js 制作了一个简单的复制粘贴组件。我试图将它变成一个 Web 组件，但无法再使复制粘贴行为起作用。

shadow DOM 内部的标记基本上是

<span contenteditable="true">
  <slot></slot>
</span>
<button>Copy</button>

Javascript：

class CopyPaste extends HTMLElement {
  constructor() {
    super();
    let shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.appendChild(copyPasteTemplate.content.cloneNode(true));
  }

  connectedCallback() {
    let copyButton = this.shadowRoot.querySelector('button');
    let textToCopy = this.shadowRoot.querySelector('span');

    function selectElementContents(el) {
      var range = document.createRange();
      range.selectNodeContents(el);
      var sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
    }

    function copyText() {
      selectElementContents(textToCopy);
      document.execCommand('copy');
    }

    copyButton.addEventListener('click', copyText);
    textToCopy.addEventListener('click', copyText);
  }
}

window.customElements.define('copy-paste', CopyPaste);