我有4个不同的html网页.下面的html代码适用于我想要应用于所有四个页面的菜单栏.有没有办法可以使用CSS而不是在我的所有4个html网页上复制/粘贴这个菜单栏HTML代码？基本上这四页是Home,News,Contact,About.只要有人点击菜单栏项目,它就会将它们重定向到4个页面中的一个.在所有这四个页面中,我希望显示菜单栏.我想创建一个CSS文件,我可以将所有4个页面链接到,然后将显示菜单栏(下面的代码).提前致谢!
有什么办法可以创建一个至少可以处理样式的CSS文件吗？我会手动将菜单栏按钮添加到每个html页面？
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="page1.html">Home</a></li>
<li><a href="page2.html">News</a></li>
<li><a href="page3.html">Contact</a></li>
<li><a href="page4.html">About</a></li>
</ul>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
</div> …我一直在阅读，但我没有找到任何东西，如果有可能在不同的 html 文件中定义并使用 ESModule 导入以与 shadowRoot 一起使用，可能吗？
index.html，我在其中定义了 2 个 javscript 模块并使用了我的组件<hello-world></hello-world>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Component</title>
<meta name="description" content="My First Component">
<meta name="author" content="Ismael Rodriguez">
<script type="module" src="js/my-template.js"></script>
<script type="module" src="js/component.js"></script>
<!--
<template id="my-template">
<h2>Hello World</h2>
</template>
-->
</head>
<body>
<h1>Web Component</h1>
<hello-world></hello-world>
</body>
js/my-template.js，在这个模块中只导出一个带有标签 html 的字符串。
export const template = `
<style>
h3 {
color: red;
font-family: helvetica;
}
</style>
<h3>Hello World</h3>
`;
js/component.js，最后导入模块my-template.js。我发现这种方法可以使用 ESmodule 从我的模块中解释模板。我如何导入模板并在我的组件中使用（支持 Firefox）？ …
我刚刚开始学习HTML自定义元素，并且通过阅读一系列介绍，教程和文档，我认为我对它的工作方式有很好的了解，但是我对使用或不使用正确方法有一个哲学问题该<template>标签。
自定义元素使您能够封装新功能，简化HTML文档的结构，并允许您简单地插入<my-custom-element>...</my-custom-element>标记而不是<div class="my-custom-element"><span class="part1">...</span><span class="part2">...</span></div>。
然后，元素的类定义将设置该元素的结构和功能。然后，一堆教程描述了如何使用<template>...</template>和<slot>...</slot>设置自定义元素的内容。然后，您必须将模板代码包含在要使用该元素的每个HTML文档中，而不是在自定义元素类的构造函数中进行设置。这是否与自定义元素以使它们更易于移植的方式帮助简化和封装功能这一事实背道而驰？还是我误解了模板在文档中的正确用法和/或位置？
从SO来看，我能找到的最接近解决这个问题的方法是：
但是答案本质上都绕在一起，说“不要使用<template>”，因此并不能真正消除我的困惑。
javascript html5 web-component html5-template custom-element
我有以下本地 html：
<html>
<head>
<link rel="import" href="https://mygithub.github.io/webcomponent/">
</head>
<body>
<!-- This is the custom html component I attempted to create -->
<img-slider></img-slider>
</body>
</html>
以及对模板的以下尝试：
<template>
<style>
.redColor{
background-color:red;
}
</style>
<div class = "redColor">The sky is blue</div>
</template>
<script>
// Grab our template full of slider markup and styles
var tmpl = document.querySelector('template');
// Create a prototype for a new element that extends HTMLElement
var ImgSliderProto = Object.create(HTMLElement.prototype);
// Setup our Shadow DOM and clone the template
ImgSliderProto.createdCallback = …