jjzjj

javascript - 除了在 light DOM 中声明插槽名称之外，还有其他选择吗？

coder 2024-12-25 原文

在 shadow DOM v0 中，开发人员不需要了解如何将 light DOM 内容放置在组件的 shadow dom 中的内部实现。

v0 规范与内置组件的当前行为相匹配，如 <select>和 <option>消费者不太关心他们的元素内容具体放置在哪里。相反，影子 DOM 会自动选取与 select 中指定的选择器匹配的元素。 <content> 上的属性标记并将它们放置在影子树内的正确位置。这需要更少的开发人员代码样板。

在 v1 中，您需要具体了解插槽名称。模仿前面用 <select> 提到的相同示例, 我需要使用类似 <option slot="option"> 的东西where slot 属性值指定放置当前元素的位置。我也可以添加不打算包含在该插槽中的元素，例如 <table slot="option"> .

总而言之，我的担忧是:

  1. 每次使用 webcomponent 时都需要指定额外的信息
  2. 能够将无效元素添加到错误的影子 DOM 位置并导致不可预测的副作用

在 shadow DOM v1 中有没有办法获得 <content select="option"></content> 的旧行为？ child 必须在哪里匹配特定的选择器，否则就会被丢弃？如果不是，有谁知道为什么要进行如此大的突破性更改？

示例 1(v0 规范)

index.html

<my-component>
    <my-child-component>Text</my-child-component>
    <wrong-child-component>Wrong</wrong-child-component>
</my-component>

component.html(影子 DOM)

<div>
    <content select="my-child-component"></component>
</div>

生成的 DOM

<my-component>
    #shadow-root
        <div>
            <my-child-component>Text</my-child-component>
        </div>
<my-component>

示例 2(v1 规范)

index.html

<my-component>
    <my-child-component slot="child-slot">Text</my-child>
    <wrong-child-component slot="child-slot">Wrong</wrong-child-component>
</my-component>

component.html(影子 DOM)

<div>
    <slot name="child-slot"></slot>
</div>

生成的 DOM

<my-component>
    #shadow-root
        <div>
            <my-child-component>Text</my-child-component>
            <wrong-child-component>Wrong</wrong-child-component>
        </div>
<my-component>

最佳答案

要过滤正确的元素，也许您可​​以使用 ::slotted( selector ) Shadow DOM CSS 样式中的伪元素:

<style>
    ::slotted( :not( option ) )
    {
        display: none;
    }
</style>
<slot></slot>

...将仅显示 <option>元素。

关于javascript - 除了在 light DOM 中声明插槽名称之外，还有其他选择吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41308885/

javascriptlightcomponentcodegtbrowserweb-componentshadow-dom

有关javascript - 除了在 light DOM 中声明插槽名称之外，还有其他选择吗？的更多相关文章

  1. ruby - 其他文件中的 Rake 任务 - 2

    我试图在一个项目中使用rake，如果我把所有东西都放到Rakefile中，它会很大并且很难读取/找到东西，所以我试着将每个命名空间放在lib/rake中它自己的文件中，我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题，但没有任务。我现在只有一个.rake文件作为测试，名为“servers.rake”，它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时

  2. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  3. ruby-on-rails - active_admin 目录中的常量警告重新声明 - 2

    我正在使用active_admin，我在Rails3应用程序的应用程序中有一个目录管理，其中包含模型和页面的声明。时不时地我也有一个类，当那个类有一个常量时，就像这样:classFooBAR="bar"end然后，我在每个必须在我的Rails应用程序中重新加载一些代码的请求中收到此警告:/Users/pupeno/helloworld/app/admin/billing.rb:12:warning:alreadyinitializedconstantBAR知道发生了什么以及如何避免这些警告吗？ 最佳答案 在纯Ruby中:classA

  4. ruby - 调用其他方法的 TDD 方法的正确方法 - 2

    我需要一些关于TDD概念的帮助。假设我有以下代码defexecute(command)casecommandwhen"c"create_new_characterwhen"i"display_inventoryendenddefcreate_new_character#dostufftocreatenewcharacterenddefdisplay_inventory#dostufftodisplayinventoryend现在我不确定要为什么编写单元测试。如果我为execute方法编写单元测试，那不是几乎涵盖了我对create_new_character和display_invent

  5. ruby - Rails 3 的 RGB 颜色选择器 - 2

    状态:我正在构建一个应用程序，其中需要一个可供用户选择颜色的字段，该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”，并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中，因此使用基

  6. java - 我的模型类或其他类中应该有逻辑吗 - 2

    我只想对我一直在思考的这个问题有其他意见，例如我有classuser_controller和classuserclassUserattr_accessor:name,:usernameendclassUserController//dosomethingaboutanythingaboutusersend问题是我的User类中是否应该有逻辑user=User.newuser.do_something(user1)oritshouldbeuser_controller=UserController.newuser_controller.do_something(user1,user2)我

  7. ruby - 在 Ruby 中按名称传递函数 - 2

    如何在Ruby中按名称传递函数？(我使用Ruby才几个小时，所以我还在想办法。)nums=[1,2,3,4]#Thisworks,butismoreverbosethanI'dlikenums.eachdo|i|putsiend#InJS,Icouldjustdosomethinglike:#nums.forEach(console.log)#InF#,itwouldbesomethinglike:#List.iternums(printf"%A")#InRuby,IwishIcoulddosomethinglike:nums.eachputs在Ruby中能不能做到类似的简洁？我可以只

  8. ruby-on-rails - 应用程序的名称是否可以作为变量使用？ - 2

    当我创建一个Rails应用程序时，控制台:railsnewfoo我的代码可以使用字符串“foo”吗？puts"Yourapp'snameis"+app_name_bar 最佳答案 Rails.application.class将为您提供应用程序的全名(例如YourAppName::Application)。从那里您可以使用Rails.application.class.parent获取模块名称。 关于ruby-on-rails-应用程序的名称是否可以作为变量使用？，我们在StackOve

  9. ruby-on-rails - 如何从过时的 TZInfo 标识符中获取 Rails TimeZone 名称？ - 2

    已经有一个问题回答了如何将“America/Los_Angeles”转换为“PacificTime(US&Canada)”。但是我想将“美国/太平洋”和其他过时的时区转换为RailsTimeZone。我无法在图书馆中找到任何可以帮助我完成此任务的东西。 最佳答案 来自RailsActiveSupport::TimeZonedocs:TheversionofTZInfobundledwithActiveSupportonlyincludesthedefinitionsnecessarytosupportthezonesdefinedb

  10. ruby-on-rails - 为什么在 Rails 5.1.1 中删除了 session 存储初始化程序 - 2

    我去了这个website查看Rails5.0.0和Rails5.1.1之间的区别为什么5.1.1不再包含:config/initializers/session_store.rb？谢谢 最佳答案 这是删除它的提交:Setupdefaultsessionstoreinternally,nolongerthroughanapplicationinitializer总而言之，新应用没有该初始化器，session存储默认设置为cookie存储。即与在该初始值设定项的生成版本中指定的值相同。 关于

随机推荐