将按钮追加到现有的shadowroot元素不正确
是因为shadowroot元素是一个封装了DOM子树的容器，用于创建和封装自定义组件。它是Web组件技术的一部分，用于实现封装、复用和隔离的组件开发。
在使用shadowroot元素时，我们应该遵循以下正确的步骤：
- 创建一个shadowroot元素：使用元素的
attachShadow()方法来创建一个shadowroot元素，并指定其模式（open或closed）。 - 将组件的样式添加到shadowroot：使用
<style>标签或<link>标签将组件的样式添加到shadowroot中，确保样式只应用于组件内部。 - 创建组件的DOM结构：使用JavaScript或HTML模板创建组件的DOM结构，并将其附加到shadowroot中。
- 添加事件处理程序：在组件的DOM结构中添加事件处理程序，以响应用户的交互。
- 添加其他组件逻辑：根据需要，添加其他组件逻辑，例如数据绑定、属性设置等。
总结： 将按钮追加到现有的shadowroot元素不正确，因为shadowroot元素是用于封装自定义组件的容器，而不是用于直接追加按钮或其他DOM元素的。正确的做法是创建一个shadowroot元素，并在其中构建组件的DOM结构，然后添加事件处理程序和其他组件逻辑。这样可以实现组件的封装、复用和隔离，提高代码的可维护性和可扩展性。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云开发（CloudBase）：https://cloud.tencent.com/product/tcb
- 腾讯云云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版（CDB）：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mpns、https://cloud.tencent.com/product/mobileanalytics
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙（Tencent Real-Time Rendering）：https://cloud.tencent.com/product/trr
相关·内容
，我正在通过下面这段代码访问它 var shadow = document.getElementById( ).shadowRoot; 现在我想创建一个按钮并将其附加到这个shadowroot。customButton.setAttribute("class", "custom_button");
customButton.innerHTML = "Back to Overview
浏览 14提问于2020-10-20得票数 0
单击哪个子元素以添加样式，我将需要移除其他子元素中的样式。所以一次只有一个孩子会保持这种风格。怎么做？class Parent extends HTMLElement { constructor(){ this.shadowRoot(){ this.shadowRoot.querySele
浏览 2提问于2019-12-14得票数 4
回答已采纳
我想为一个元素创建一个阴影DOM，这样我就可以显示Chrome扩展的元素，而不会受到页面样式的影响。
浏览 2提问于2016-10-08得票数 26
回答已采纳
= false;
//while(children.length > 0) { //} Pa
浏览 2提问于2015-02-04得票数 2
回答已采纳
1回答
这是一个有标题的按钮。第二个The组件是my-action-bar。目标是以编程方式将my-action-2添加到my-action-bar中。为此，my-action-bar有一个addAction()方法，它创建一个新的my-action-2元素并将其添加到影子DOM中。
问题在于my-action-2，。当my-action-2嵌套在my-action-bar中时，shadowRoot变量表示my-action-bar的影子DOM，而不是my-action-2！
浏览 2提问于2017-01-24得票数 1
回答已采纳
当我想要在Chrome 35中的内容可编辑div元素中的插入符号位置创建新的HTML节点(可能是所有本地支持Shadow DOM的webkit浏览器，而不是通过多填充)时，问题就出现了。当我使用window.getSelection().getRangeAt(0)获取当前插入符号位置时，新节点将被添加到body元素的开头，而不是div。当我尝试使用建议的this.shadowRoot.getSelection().getRangeAt(0)时，也不起作用，因为它返回了不正确的范围对象( bug还是特性？)
浏览 10提问于2014-05-30得票数 4
回答已采纳
2回答
function () { const shadowRoot= this.attachShadow({ mode: 'open' });我目前正在做的是
const scripts = [...shadowRoot</
浏览 36提问于2017-08-07得票数 8
回答已采纳
为了冗余，我还在“工具栏和菜单”中添加了一个新的菜单，并将我所有的宏也添加到了这个工具栏中，它看起来像一个愚蠢的、模糊的浮动框。我使用"attach“按钮将宏附加到文档中。但是，当我将文档发送给同事时，唯一出现的就是模糊的浮动自定义工具栏，没有任何宏映射到按钮，按钮也没有我的自定义图像。
我该怎么做呢？
浏览 1提问于2013-06-21得票数 1
回答已采纳
我们有一个我们想要的函数，比如隐藏html的一个元素，但是我们希望它用页面的两个不同的按钮来激活这个功能。将类添加到按钮中是正确的，例如没有css规则的"hideElement“，然后在jquery中： $("#elementToHide").hide(); 或者向代码中添加没有css规则的css类是不正确的或不优雅的？
浏览 2提问于2014-02-21得票数 0
回答已采纳
web组件似乎在shadowDOM下，使用样式标记导入css将无法工作。任何关于任何框架的提示，Vuetify或Ant设计或尾风CSS都将不胜感激。
浏览 4提问于2022-02-14得票数 2
回答已采纳
我正在尝试将复制/粘贴和打印功能添加到嵌套的lit元素树中。我正在尝试渲染嵌套的组件，这样我就可以将字符串中的完整html+style推入复制/粘贴缓冲区，也可以推入iframe或隐藏的div进行打印。var elem: any = document.querySelector("simple-greeting");在尝试此操作时，复制
浏览 1提问于2021-02-09得票数 1
我确信解决方案有效，但我对聚合物(和js)缺乏经验，无法在我的情况下确定正确的事件侦听器：下面是元素代码，以显示我试图通信/实现的内容。flatiron路由工作正常(如果我在URL中手动输入#itemsList或#itemOpen并使用浏览器的前一个或下一个
浏览 3提问于2014-09-09得票数 0
回答已采纳
}
customElements.define("my-component",MyComponent) 在这两种情况下，this.children.length都将返回0，尽管随后会在屏幕上显示元素，并且能够在控制台上检查自定义元素，并使用Element.children.length获得预期数量的子元素。我认为这意味着在运行constructor或connectedCallback时，子元素还不可用。 有没有办法在我的元素的类定义中指定一个当子元素可用时触发的函数
浏览 28提问于2021-07-22得票数 0
回答已采纳
我使用execute_script函数来访问影子根元素。例如：我使用的是Chrome 2.20驱动程序。
浏览 5提问于2016-03-22得票数 7
我有一个html按钮，它调用一个函数，但是当按钮单击时，插入的div只出现一秒钟，然后消失，无论是在视觉上还是在html树中。></div>
但是，如果插入到具有相同html结构的“div.holder”中，框将按预期的方式连续显示，但按钮却没有了。按钮在连续显示下消失的原因是什么&
浏览 0提问于2019-01-19得票数 0
回答已采纳
在我当前的Range7应用程序中，我们正在与库中的一个组件进行斗争，它需要一些css资源。我们不想将这些资源应用于应用程序的所有其他部分，而是应用于一个特定的组件，即它的子代和孙辈。encapsulation: ViewEncapsulation.Nativeencapsulation: ViewEncapsulation.ShadowDom这些选择之间有什么不同？
浏览 0提问于2018-11-21得票数 7
回答已采纳
5回答
我有三个按钮是水平堆叠的。单击每个按钮时，都会显示一个div元素。当浏览器调整为移动视图的大小时，我希望元素垂直叠加。默认情况下会发生这种情况，但我希望将div元素直接堆叠在与其关联的按钮下面。如果我将相关的div直接移动到按钮下面，它在移动上看起来很好，但在桌面上却不正确。</span></div>
我确实尝试过在按钮上使用浮点数，但无法获得所需的输出。这是一把小提琴，展
浏览 5提问于2016-05-03得票数 0
回答已采纳
1回答
我在切换汉堡菜单时遇到了问题，我的控制台抛出了一个header.pugdiv.navbar div.navbar__link.navbar--toggle
浏览 3提问于2018-07-12得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
