1. 首页
  2. css

CSS玩影子游戏

大约一年前,Twitter宣布,如果浏览器支持shadom-DOM,它将开始使用shadowdom而不是来显示嵌入式tweet。n为什么?嗯,速度是一个原因。n他们说:n浏览器内存利用率要低得多,渲染时间要快得多。即使在同一页上显示多条tweet,tweet也会显示得更快,页面滚动也会更顺畅。n为什么选择?为什么需要使用iframes或shadowdom?为什么不直接把内容注入页面呢?n对控制的需求是完全可以理解的。嵌入式Tweet的外观和行为应该与嵌入式Tweet完全相同。他们不想担心页面的样式会导致页面的出血和混乱。nAn使样式范围非常简单。把iframe的src指向一个URL,这个URL显示了你想要嵌入tweet的样子,你就很好了。使用的样式只有那些包含在文档中的样式。nTwitter以渐进增强和联合友好的方式进行iframe注入。他们用Tweet提供一个

和一个。脚本执行iframe注入。如果脚本不运行,不管怎样,一个快乐的区块引用。如果脚本确实运行了,一个功能齐全的嵌入式Tweet。n这个脚本就是关键所在。脚本可以做任何事情,它们托管它,所以它们可以随时更改它。这就是他们用来检测shadowdom支持的方法。正如我们所讨论的,shadowdom渲染速度更快,内存需求也更低。Shadow-DOM还可以帮助我们确定样式范围,我们马上就来看看这个问题。高度灵活性n还有一件事,恰好是我的心上人。一个不会像你期望其他元素那样调整高度以适应它的内容。你设定了一个高度,就这样。它将有滚动条,如果你允许它和内容需要它。早在五福时代,我们就得跳很多圈才能让嵌入的形状(在框架中)达到所需的高度。今天,在CodePen,我们的嵌入式笔有可调的高度,但没有任何选择只是\”高,因为他们需要\”。(我完全确定这对于CodePen嵌入是否有意义,但无论如何,您现在不能这样做。)n带有阴影DOM的元素与任何其他元素一样,它将自然扩展到内容。我相信这对Twitter也很有吸引力。如果他们算错了高度,他们冒着削减内容或至少破坏嵌入Tweet外观的风险。最基本的用法n这里是如何建立shadow DOM并将内容放入其中的最低要求:n注意shadow DOM中的样式如何不会泄漏到常规段落元素?如果这两段都是红色的话。n注意shadow DOM内部的段落与外部的段落不一样吗?好吧,通常是这样。继承的样式仍然通过shadowdom继承(这样就没有iframe那么强大了)。但是,我们故意强迫它回到初始状态,就像这样:n:host {all: initial;}处理回退n对于不支持影子DOM的浏览器,处理回退的第一个想法是,您可以将填充到影子DOM中的相同内容放入带有srcdoc的iframe中,例如…nnOr more likely this is something you\”re doing in JavaScript, so you\”d test for support first, then either do the shadow DOM stuff or dynamically create the iframe:nTurns out srcdoc不是回退的最佳选择(单独),因为没有IE或边缘支持。不过,对于普通的src来说,仅仅使用一个数据URL并不是什么大事。这是西蒙·维达斯的一个fork,他在那里解决了这个问题:nlet = document.querySelector(\”.my-element\”);if (document.body.attachShadow) {let = content;} else {let = content = el.parentNode;parent.replaceChild(newiframe, el);}TL;DRn- 阴影DOM非常酷。n- 它在很多方面都可以与iframe相媲美,包括样式封装。嵌入的第三方内容是一个很好的用例。n- 可以很容易地使用它,同时又可以返回到iframe。n- 它是web组件的一部分,但是如果你不想,你不必全力以赴。n这里是另一个简单的演示(这个演示使用了自定义元素),但不是我们自己的支持,它是多功能的

CSS玩影子游戏 为WP2原创文章,链接:https://www.wp2.cn/css/css%e7%8e%a9%e5%bd%b1%e5%ad%90%e6%b8%b8%e6%88%8f/