在Web组件中使用外部JS库 [英] Using external JS libraries in a web component

问题描述

我正在使用Polymer 2开发一个Web组件，并希望使用第三方JavaScript库，该库并非专门用于Web组件。据我所知，唯一的方法是在我的Web组件的HTML文件中包含一个引用该库的< script> 标记。

I am developing a web component using Polymer 2, and would like to make use of a third-party JavaScript library, which was not specifically designed for use with web components. As far as I know, the only way to do this is to include a <script> tag referencing the library, within the HTML file of my web component.

我可以看到这样做的几个问题，并想知道是否有任何解决方法，实际上是否以这种方式包含第三方库被视为不良 - 练习。

I can see a couple of issues with doing this, and want to know if there are any ways around them, and indeed whether including third-party libraries in this way is considered bad-practice.

1. 外部库可能设置全局变量，这些变量对页面上的其他组件可见，允许Web组件打破每个组件其他，或打破他们托管的页面。由于封装经常被吹捧为使用Web组件的一大优势 ，这似乎是一个问题。

1. The external library might set global variables which are visible to other components on the page, allowing web components to break each other, or break the page they are hosted on. Since encapsulation is often touted as one of the big advantages of using web components, this seems like a problem.

外部库可能执行DOM查询或更新，这些查询或更新无法访问Web组件的阴影区域正在使用它们，因此外部库可能根本不工作，或者可能再次更新托管页面的DOM，从而破坏封装。

The external library might perform DOM queries or updates which would not be able to access the shadow-dom of the web component that is using them, so the external library might not actually work at all, or might update the hosting page's DOM again breaking encapsulation.

所以，我错过了什么或这是否意味着在Web组件中包含外部库是一个非常糟糕的主意？如果是这样，这似乎是这项技术的巨大限制，因为我们无法利用大量已有的JS库。

So, am I missing something or does this mean that including external libraries in a web component is a really bad idea? If so, it seems like a huge limitation of this technology, since we can't take advantage of the vast number of pre-existing JS libraries out there.

推荐答案

如果您有一个外部库，可以执行 document.querySelector 之类的操作，那么您有两个选择。

If you have an external library that does things like document.querySelector then you have two choices.

1. 选择不将ShadowDOM与任何组件一起使用。如果
   不是一个选项，或者如果你真的那么，真的想要使用shadowDOM
   那么：


2. 你需要修改第三方库以允许root要指定
   元素而不是始终使用 document 。

1. Choose to not use ShadowDOM with any of your components. If that is not an option, or if you really, REALLY want to use shadowDOM then:
2. You need to modify the third party library to allow a root element to be specified instead of always using document.

除了这两个选项，您可能无法使用假定 document 将适用于所有内容的第三方库。

Beyond those two options you will probably not be able to use a third party library that assumes document will work for everything.

我想另一种选择是重新评估第三方库并查看它是否真的值得使用。

I guess the other option is to re-evaluate the third party library and see if it is REALLY worth using.

在我的团队中我们不使用不仅仅是可靠逻辑的第三方库。像 moment.js 这样的东西只是逻辑，我们可以毫无问题地使用它们。

On my team we don't use third party libraries that are not just solid logic. Things like moment.js are just logic and we can use them without problems.

但像jQuery这样的东西？呸！我看不到组件需要这样的东西。

But something like jQuery? Yuck! I can't see needing something like that for a component.

祝你好运！

这篇关于在Web组件中使用外部JS库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！