jjzjj

javascript - 将全局样式应用到 Shadow DOM 的正确方法

coder 2024-07-30 原文

这个问题与 StackOverflow 上的其他问题类似，但我找不到任何描述适用于我的情况和未弃用方法的答案(而且我开始考虑可能没有针对这种情况的任何好的解决方案) .

假设我们有一些 main.css 文件，其中包含按钮、列表、链接等的常用样式。所以它只是一些标准的 .css 文件，其中包含我们希望在整个应用程序中重用的通用样式。我们希望使用 Shadow DOM 将相同的样式应用于 Web 组件。

据我所知，有几种方法可以实现这一点:

  1. 使用一种已弃用的方法:::shadow、>>>、/deep/选择器。但这些选择器现在已被弃用，所以我想这不是继续前进的好方法。
  2. 使用 CSS 变量。如果我们需要设置一些属性，这种方法非常适合定制目的。但是如果我们想从 main.css 文件中迁移 10-20 个常用样式，那就太复杂了。
  3. 在 Shadow DOM 中使用 @import 语句或“链接”标签。它会工作，但它会复制每个组件的所有样式。如果我们有 10 个 Web 组件，我们最终会得到 10 个完全相同样式的副本。这听起来也不是足够好的解决方案。尤其是当我们有很多通用样式时，从性能的 Angular 来看，这听起来可能是个糟糕的解决方案。
  4. 根本不要使用 Shadow DOM 而使用全局样式 :) 但这不是当前问题的解决方案。

我还查看了 Angular Framework 中同样的问题是如何解决的(我查看了 Angular 的第 5 版)。当我将封装行为设置为 Native 时，它​​实际上只是在复制样式(如上述 #3 中所述)，我认为这不是最好的方式(但可能是目前最好的方式)。

那么，有没有人知道是否有任何其他方法可以解决这个问题而没有上述缺点？听起来 Shadow DOM 当前的缺点带来的问题比它试图解决的问题还要多。

最佳答案

解决方案 3 没有真正的缺点:

  1. 无论您是将 CSS 样式应用于主文档中的 n 个元素，还是应用于 n 个 Shadow DOM 中的 1 个元素，该样式无论如何都会复制到整个 n 个元素。

  2. 如果您在 n 个 Shadow DOM 中导入文档 n 次，il 实际上只会加载一次并通过浏览器缓存重复使用。

在那之后，它将取决于 Shadow DOM 和 CSS 样式的浏览器实现，您应该会看到只有数千个 Shadow DOM 的性能下降。

Chrome 73+ 和 Opera 60+ 的 2019 年更新

现在您可以直接实例化一个 CSSStyleSheet 对象并将其分配给不同的 Shadow DOM。

这样 HTML 就不会被复制。

var css = new CSSStyleSheet()
css.replaceSync( "@import url( main.css )" )
host.shadowRoot.adoptedStyleSheets = [css] 
host2.shadowRoot.adoptedStyleSheets = [css]

你也可以将其应用于全局文档:

document.adoptedStyleSheets = [css]

另一个优点是样式表的更新将应用于所有采用它的 Shadow DOM(和文档)。

 css.replaceSync( '.color { color: red }' )

关于javascript - 将全局样式应用到 Shadow DOM 的正确方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53244494/

javascriptShadowsectionDOMcssweb-componentshadow-dom

有关javascript - 将全局样式应用到 Shadow DOM 的正确方法的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点，但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  5. ruby - 将差异补丁应用于字符串/文件 - 2

    对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl

  6. Ruby 方法() 方法 - 2

    我想了解Ruby方法methods()是如何工作的。我尝试使用“ruby方法”在Google上搜索，但这不是我需要的。我也看过ruby​​-doc.org，但我没有找到这种方法。你能详细解释一下它是如何工作的或者给我一个链接吗？更新我用methods()方法做了实验，得到了这样的结果:'labrat'代码classFirstdeffirst_instance_mymethodenddefself.first_class_mymethodendendclassSecond使用类#returnsavailablemethodslistforclassandancestorsputsSeco

  7. ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2

    我有一大串格式化数据(例如JSON)，我想使用Psychinruby​​同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解

  8. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  9. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此

  10. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

随机推荐