个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我想知道如何在 lit-element/lit-html 中实现引导导航栏
我在 lit-element 中创建了导航栏组件，但导航栏下拉菜单和切换功能不起作用。
我必须将固定顶部导航栏实现为 html 中的 lit-element 组件。请检查代码并卡住。如果有任何替代方案，请提供解决方案。
// component.js
import { LitElement, html } from 'lit-element';
class MyElement extends LitElement {
render(){
return html`
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<a class="navbar-brand"><img src="../images/send4x.svg" alt="" class="logoC mr-4"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown mr-4">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownProvider" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Providers
</a>
<div class="dropdown-menu mr-4" aria-labelledby="navbarDropdownProvider">
<a class="dropdown-item"
href="#">trans</a>
<a class="dropdown-item"
href="#">fund</a>
</div>
</li>
</ul>
</div>
</nav>
</header>
</div>
`;
}
}
customElements.define('my-element', MyElement);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script type="module" src="./my-element.js"></script>
<title>lit-element code sample</title>
</head>
<body>
<my-element> </my-element>
</body>
</html>
最佳答案
如果您愿意放弃 Shadow DOM，您可以通过覆盖 lit-element 类中的 createRenderRoot 方法将渲染根切换到元素而不是阴影根:
class Navbar extends LitElement {
createRenderRoot() {
return this;
}
// etc
}
关于html - 如何将引导导航栏实现为 lit-html/lit-element 中的组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56376475/
27
4
0
lit-html 是否有类似 React 的 ref 功能的更改？例如，在下面的伪代码中 inputRef 将是一个回调函数或一个对象 { current: ... } 其中 lit-html 可以传
我有以下 lit web 组件 在 my-element 中有一个按钮，单击时应调用父 Web 组件测试函数。 我如何使用发光元素做到这一点？ 最佳答案 这可以通过使用 Property Expre
[Writing Templates] 下的主要文档提供了以下用于将事件处理程序与 lit-html 绑定(bind)的示例。 html` console.log('clicked')}>Click
我一直在学习 Polymer，这是 - 网络的 future ( lit-element & lit-html ) 我明白了点亮 html 用于使用几种有效技术的 HTML 模板。 同时点亮元素 是一
父元素(x-app标签)显示child1(x-counter)，child2(child2-app)元素，每当child1有任何更改时，我也想将其更新为child2。因此，在父级中，我尝试使用 que
我想知道如何在 lit-element/lit-html 中实现引导导航栏 我在 lit-element 中创建了导航栏组件，但导航栏下拉菜单和切换功能不起作用。 我必须将固定顶部导航栏实现为 htm
我有一个相当复杂的表格，我想确保它在编辑和作为“新记录”表格时都能正常工作。实际上阻止了表单的提交，实际上将JSON发送了过来。然而，这不是重点。此外，this.record 在加载时分配(用于编
感谢您的阅读。 我是 polymer/lit-element，lit-html 的新手。我已经开始使用 PWA 入门套件。令我惊讶的是，它没有使用 polymer 元素，而是使用发光元素。 我试图应用
我想在 lit-element 中实现 lit-element-bootstrap 包。 我在控制台中收到以下错误，加载模块脚本失败:服务器以非 JavaScript MIME 类型“text/htm
我有这段代码: val df = resultsDf .withColumn("data_exploded", explode(col("data_item"))) .groupBy("dat
我有这段代码: val df = resultsDf .withColumn("data_exploded", explode(col("data_item"))) .groupBy("dat
我开始尝试 lit-html 和 lit-elements，尝试使用它，现在我遇到了问题，我无法找到如何在线发布此类代码。从未在在线平台上使用过 Node-js 包，只使用过其中的一些代码。通常我会构
我正在使用 点亮元素 通过 @open-wc并且目前正在尝试编写一组嵌套的组件，其中内部组件是 输入栏 还有一些 祖先组件 必须支持一些任意重写规则比如“不允许输入数字”。 我想弄清楚的是构建它的正确
根据文档，我无法理解它到底做了什么。 这个文档不够详细。 有例子吗？ 最佳答案 文档没有那么深，因为它所做的没什么大不了的，这个装饰器所做的只是创建一个“快捷方式”，用于在元素的根上调用 queryS
我有 2 个发光元素组件。父内容是: ${this.renderChildren()} renderChildren函数正在遍历数组属性 children = [1, 2]并创建 元素。呈现的页面
在属性值更改事件上配置观察者的推荐方法。 当前使用更新的方法并循环更改有效的Properties参数。 static get properties() { return { testpro
刚从 lit-element 开始 在我的渲染中我有: return html` ${this.jobCreate} ${this.jobDetails} `; get jobCr
如果有一个列表应该从数组呈现，并且该数组将从grand-grand-grand-grand-grand-parent自定义元素传递。这会非常烦人。 是否有像 redux 一样的 lit-element
刚从 lit-element 开始 在我的渲染中我有: return html` ${this.jobCreate} ${this.jobDetails} `; get jobCr
如何使用具有对象类型属性的 Lit-element？我认为定义 myelement 有效: static get properties() { return { whales:
我是一名优秀的程序员,十分优秀！