纯原生JS，需要一个样式比较复杂的自定义组件。
想要在很多页面复用，想到了一种方式，但没试过：
在main.js中定义一个公共方法，动态创建构成该组件的dom元素，导入包含该组件样式的css文件并与组件的dom绑定（css比较复杂，直接在方法里写不好维护）。使用时直接调用该公共方法。
三个问题：1. 如何导入css文件？2. 导入后如何找到与该组件对应的部分？ 3. 找到该部分后如何与dom绑定？
或者还有其他比较好的组件复用的方式？
该回答引用GPTᴼᴾᴱᴺᴬᴵ
在原生JavaScript中，您可以使用以下方法来解决您的问题：
1.如何导入CSS文件？
您可以通过创建一个新的元素并将其添加到HTML文档的部分来导入CSS文件。以下是示例代码：
function loadCssFile(filename) {
var link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", filename);
document.head.appendChild(link);
}
然后，您可以在您的公共方法中调用loadCssFile()函数并将所需的CSS文件名作为参数传递。
2.导入后如何找到与该组件对应的部分？
您可以使用CSS选择器来选择与您的组件相关的DOM元素。例如，您可以使用一个特定的class名称来标识该组件，并使用document.querySelector()方法来选择该class对应的DOM元素。以下是示例代码：
function createComponent() {
loadCssFile("your-component-styles.css");
var component = document.createElement("div");
component.classList.add("your-component-class");
// Other code to create the component...
var parentElement = document.querySelector(".your-component-container");
parentElement.appendChild(component);
}
在上面的代码中，.your-component-class是您用于标识该组件的class名称，.your-component-container是包含该组件的父元素的选择器。
3.找到该部分后如何与DOM绑定？
在您的公共方法中，您可以使用DOM API来操纵组件的DOM元素并将其添加到页面中。例如，您可以使用document.createElement()方法创建新的DOM元素，并使用element.appendChild()方法将其添加到另一个元素中。以下是示例代码：
function createComponent() {
loadCssFile("your-component-styles.css");
var component = document.createElement("div");
component.classList.add("your-component-class");
// Other code to create the component...
var parentElement = document.querySelector(".your-component-container");
parentElement.appendChild(component);
}
在上面的代码中，component是您创建的DOM元素，parentElement是包含该组件的父元素的DOM元素。
另外，如果您需要在多个页面中重复使用同一个组件，您可以考虑将该组件封装在一个单独的JavaScript文件中，并将其导入到您的HTML文件中。这样，您就可以在需要使用该组件的任何页面中重复使用该文件。
你把这个组件封装好，别的html文件里面直接引入不就好了么
封装成一个闭包，或者做成一个类，事件按className绑定，比如上传，所有定义为popUpload的，一个事件，class为imgUpload的，另一个事件，再在document上自己添加事件冒泡检查，实现类似jq的on方法
组件的css单独提起出来为一个css文件，然后在使用的地方引入。
如果这个组件不需要绑定什么事件的话，似乎没有什么难处。