inert, 用于惰性属性和属性的Polyfill

分享于 

5分钟阅读

GitHub

  繁體 雙語
Exploring the `inert` attribute
  • 源代码名称:inert
  • 源代码网址:http://www.github.com/WICG/inert
  • inert源代码文档
  • inert源代码下载
  • Git URL:
    git://www.github.com/WICG/inert.git
    Git Clone代码到本地:
    git clone http://www.github.com/WICG/inert
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/WICG/inert
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    Build StatusGreenkeeper badge

    inert 属性/属性允许网页作者将DOM树的部分标记为惰性:

    当 node 为惰性时,如果目标为目标用户交互事件,则 User Agent 必须为 node,可能忽略用户在页面中搜索用户界面的目的,可能会阻止用户选择该 node 中的文本。

    此外,在辅助技术中也应该隐藏一个价格为的node。

    详细信息 Polyfill

    安装

    npm install --save wicg-inert

    因此,建议只使用已经发布到npm的版本,而不是克隆 repo,直接使用源代码。 这有助于确保你使用的版本是稳定的和经过彻底测试的。

    但是,如果你确实要从源代码构建,请确保克隆了最新的标记 !

    用法

    1将脚本添加到页面

    . . .
     <scriptsrc="/node_modules/wicg-inert/dist/inert.min.js"></script>
     </body>
    </html>

    2在元素上切换 inert

    constel=document.querySelector('#my-element');el.inert=true; // alternatively, el.setAttribute('inert', '');

    旧版浏览器支持

    如果想在旧浏览器中使用 inert,则需要为映射设置。Element.prototype.matches 和Node.prototype.contains 添加其他的polyfills。

    按照 w3c polyfill指南的新特性,inert polyfill不会捆绑其他 polyfills。

    你可以使用像 Polyfill.io 这样的服务来下载当前浏览器所需的polyfills。 只需将以下一行添加到页面的开头:

    <scriptsrc="https://cdn.polyfill.io/v2/polyfill.min.js?features=Map,Set,Element.prototype.matches,Node.prototype.contains"></script>

    的性能和陷阱

    polyfill试图为 inert属性提供一个合理的保真度 polyfill,但是请注意:

    • 它依赖于变异观察器检测 inert 属性的添加,并检测在惰性子树中动态添加的内容。 在任何一种突变之后,立即检测惰性 -ness会导致结果不一致;请允许当前任务在依赖变异相关更改时生效,例如通过 setTimeout(fn, 0) 或者 Promise.resolve()

      例如:

    constnewButton=document.createElement('button');constinertContainer=document.querySelector('[inert]');inertContainer.appendChild(newButton);// Wait for the next microtask to allow mutation observers to react to the// DOM changePromise.resolve().then(() => {
     expect(isUnfocusable(newButton)).to.equal(true);
    });
    • 但是,使用 inert属性是同步的。

    • 本机 inert 实现相比,polyfill将成本高,性能明智,因为它需要大量的树行走。 为了减少这一点,我们建议在性能敏感的操作( 在动画或者滚动过程中) 中不使用 inert。 在这些事件完成之前,请等待,或者考虑使用 requestIdleCallback 来设置 inert

    测试

    测试是使用ES5语法编写的。 这是为了避免在旧浏览器中使用它们。 他们所依赖的一些现代特性,比如 Array.fromPromises。 这些是用于使用 Polyfill.io 测试的polyfilled。 有关polyfilled特性的列表,请查看 karma.conf.js 中的polyfill 部分。


    ATT  PROP  ATTR  attribute  property  
    相关文章