我正在使用Polymer使用Web Components制作的Web应用程序。每个组件都有许多子组件，每个组件都有自己的shadow DOM。
我专门研究一个带有很多字段的大型部分，其中一些部分位于视口之外。当我尝试提交表单时，会调用验证函数。验证函数被调整，以便它不仅返回一个布尔值，而且设置一个数组，其中包含名为'invalidElements'的无效组件。
然后我可以调用焦点在第一个无效元素上，这样当我单击提交时元素焦点并进入视口。
invalidElements[0].focus()
问题是我想顺利滚动到无效字段。我不能使用“scroll-behavior：smooth”，因为所有id都隐藏在父组件的许多shadow DOM之下。
即使我可以从invalidElement [0]获取id ...
invalidElement[0].id
...之后我无法访问它。我的意思是，我可以，但这意味着要抓住进入每个shadowDOM的网站。鉴于表单的大小，由于它的许多字段，这将无法实现。
我怎么能顺利滚动到聚焦元素？
如果我理解正确，你想滚动到元素而不访问任何其他控件。然后使用Javascript你可以实现如下，
invalidElement.scrollIntoView({ block: "center", inline: "center"});
如果要通过访问所有元素（平滑滚动）慢慢滚动到元素，可以使用下面的代码段。
invalidElement.scrollIntoView({ block: "center", inline: "center", behavior: "smooth" });