标签: web-component

我正在创建一堆 Web 组件，不知道如何为 stenciljs Web 组件创建通用 css。根据文档我可以添加globalStyle: 'src/global/app.css'，但似乎我只能共享 css 变量。例如

:root {
   --font_color: #484848;
   --bg_color--light: #f9f9f9;
}

如果我想为按钮使用通用的基本 CSS，例如

button {
  border-radius: 5px;
  padding: 2px 10px;
}

我想在所有组件中分享| 不知道如何实现这一目标。预先感谢您的建议。

我正在构建一个桌面应用程序，用于监视某些事物并生成有关其正在监视的内容的数据。当用户想要与数据交互时，应用程序会启动一个非常简单的网络服务器。服务器提供静态页面并具有基本的 http API 来提供数据。我使用 html 作为通用 UI，用户使用浏览器查看数据并与之交互。

我想使用 Google 的 Lit 2 将我的 html/css/js 重写为基于组件的 Web 应用程序。我喜欢纯 Web 组件的想法，但我注意到 Lit 提供了一些很棒的附加功能。毫不奇怪，大多数 Lit 文档都面向具有构建步骤的更传统的 Web 环境。我想看看是否可以让我的服务器尽可能简单并避免传统的后端工具（打字稿编译、缩小等）。我想用一系列简单的 js 文件中的 Lit 组件替换当前的静态 html/css/js。

目前，我的服务器从“公共”目录为我的页面提供服务，并具有最小的 http API：

- public/
 -- js/
 -- css/
 -- index.html

我应该如何在没有构建步骤的系统中使用 Lit？我需要与我自己的继承自 LitElement 的 javascript 类一起提供的最小 Lit 文件集是多少？

遵循有关 Web 组件的 google 教程，我喜欢作者在customElements.define函数调用中使用匿名类的方式，因为它在创建立即调用的函数调用时避免了更多括号。

我使用静态类变量来存储模板元素，因此每次实例化自定义标记时都不会查询它。

问题是connectedCallback我不知道如何引用类名，因为它是一个匿名函数。在 python 中可以type(self)，但我的研究表明，typeof this由于原型魔法，这在 JS 中不起作用。

window.customElements.define('my-uploader', class extends HTMLElement {
    static template = document.getElementById("TEMPLATE_UPLOADER");

    constructor() {
        super(); // always call super() first
    }

    /** Custom Component Reactions **/
    connectedCallback() {
        let shadowRoot = this.attachShadow({mode: "open"});
        shadowRoot.appendChild(document.importNode(ANONYMOUS_NAME.template, true));  // <--- How to refer to the class name here?
    }

如何引用ANONYMOUS_NAME中的类' connectedCallback？

也许有人以前尝试过这个并且能够给我一个提示。我使用了正常的 svelte 设置（在主页中提到）来构建应用程序；

npx degit sveltejs/template my-svelte-project

我想在 Svelte 中使用 vaadin Web 组件。我已经安装了；

npm install @vaadin/vaadin

main.ts的代码：

<script lang="ts">
    import '@vaadin/button/theme/material'

</script>

<main>
    <vaadin-button theme="primary">Primary</vaadin-button>
    <vaadin-button theme="secondary">Sec</vaadin-button>
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

事实是它几乎可以工作:)按钮是有样式的，我可以点击它们但是......主题被忽略；

主要应该有一个背景颜色，如文档中所述； https://vaadin.com/docs/latest/ds/components/button/#styles

任何想法？？？

我得到一个Uncaught TypeError: Illegal constructor.基本上空的构造函数：

export class Citation extends HTMLSpanElement {
  constructor() {
    super();
  }
}

这个有用的答案中的评论声称

我在使用 Web 组件时遇到了同样的错误，但仅限于 Safari（不是 Firefox）。原因是我做了一个 UserAvatar 类扩展 HTMLSpanElement （而不是 HTMLElement）

这让我尝试了一下HTMLElement，这实际上消除了错误。所以现在我想知道。我可以扩展哪些 HTML 元素？为什么我不能扩展span元素？还有几个类似的问题：Uncaught TypeError: Illegal constructor whenextending HTMLButtonElement，How to create new instance of an Extended Class of Custom elements。但它们有点旧，在这个答案中声称这应该从 2018 年 10 月开始工作。我使用的是最新的 Firefox 浏览器，所以我很困惑......

有人知道发生了什么事吗？

我有一个嵌套在其他 Web 组件内部的 Web 组件，并且我正在为我的组件开发主题解决方案。我需要一种导出多个零件的方法，但我尝试做的事情不起作用，并且当我尝试导出多个零件时，样式不会应用。

结构如下：

<my-component>
  <other-component exportparts="theme-btn theme-dropdown"/>
</my-component>

然后在我的 CSS 中：

my-component::part(theme-btn) {
  background-color: tomato;
}

没有应用任何样式。但是，当我只导出这样的一部分时：exportparts="theme-btn"它other-component可以工作并应用样式。我哪里出错了？

如果 JavaScript 中的一切都来自原型，我想有某种方法可以在不使用类的情况下创建 Web 组件。我从未找到任何有关它的文章，我不知道这是因为这是一种不好的做法还是因为它不可能。

我有一个 SvelteKit 组件，需要对应的+page.server.tscookie 验证表单操作。我的目标是拥有一个带有相应删除按钮的组件，该组件将从端点内的表单操作中向我的后端发送 API 请求+page.server.ts。

为了清楚起见，我的结构：

- src/
    - components/
        - Component/
            - +page.svelte
            - +page.server.ts
    - routes/
        - route/
            - +page.svelte

组件+page.svelte：

<div class="card">
    <form method="POST">
        <input type="hidden" value="{uuid}" name="uuid" />
        <button class="btn-icon variant-filled-primary">
            <span><Icon icon="material-symbols:delete-outline"></Icon></span>
        </button>
    </form>
</div>

组件+page.server.ts：

import type { Actions } from './$types';
 
export const actions = {
  default: async ({ cookies, request }) => {
    // Doing some http-only Cookie authenticated fetching and data processing here
  }
} satisfies …

https://www.polymer-project.org/1.0/docs/devguide/local-dom#dom-distribution

在"Dom Distribution"下的上述链接中,它说:

为了支持元素的轻DOM与其本地DOM的组合,Polymer支持该<content>元素....

只是想知道这是否过时了？Polymer 1.0是否使用此处所述的插槽？

https://developers.google.com/web/fundamentals/primers/shadowdom/?hl=en#composition_slot

我正在尝试按照https://www.webcomponents.org/polyfills/中的解释来填充web组件,因为我希望我的示例应用程序可以在Chrome和Firefox上运行.但是我得到了ReferenceError:Firefox中没有定义customElements错误.请参阅下面的index.html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="robots" content="index, follow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Sample</title>
    <link rel="stylesheet" href="css/site.css">
    <!-- Components -->
    <link rel="import" href="components/global/site-navigation.html">
</head>

<body>
    <script>
        (function () {
            if ('registerElement' in document
                && 'import' in document.createElement('link')
                && 'content' in document.createElement('template')) {
                // platform is good!
            } else {
                // polyfill the platform!
                var e = document.createElement('script');
                e.src = 'js/webcomponents.js';
                document.body.appendChild(e);
            }
        })();
    </script>
    <site-navigation></site-navigation>
</body>    
</html>

我错过了什么？

PS:Chrome中一切正常(有/无填充)