custom-element 相关问题

自定义元素是HTML的一项功能，它为您提供了一种构建自己的全功能DOM元素并在HTML标记，CSS样式表和JavaScript代码中使用它们的方法。

我在shadowDOM自定义元素模板内应用表格样式，在插槽内，它不接受表格th和td CSS。类 Table 扩展 HTMLElement { 构造函数（）{ 苏...

javascript css web-component tabular custom-element

回答 3 投票 0

我创建了一个如下所示的 Angular Web 组件 @成分（{ 选择器：'dlx-slider'， templateUrl: './slider.component.html', styleUrls: ['./slider.component.scss'], 封装：

angular web-component custom-element

回答 7 投票 0

使用自定义 HTML 元素模板化页眉和页脚

我试图在我的所有网页上显示相同的标题（菜单）。 youtube 有一个关于此的视频。（与上面的标题相同）。但我似乎无法让它继续下去。参考我的代码（mainmenu.j...

javascript html custom-element

回答 2 投票 0

如何将“:host”（或“:host()”）与“:has()”一起使用

有人知道如何使用 :host （或 :host()）和 :has() 吗？例如这样的事情： :主机:有([禁用]) { 不透明度：0.75； } 或者 :主机(:有([禁用])) { 不透明度：0.75； } 与...

css web-component custom-element

回答 2 投票 0

使shadow dom中的元素具有最小高度和边框的自定义元素高度的100％，同时如果溢出也缩放父级

我正在制作一个自定义元素，它充当具有语法突出显示和其他一些功能的文本区域。我将其简化为一个自定义元素，其中有一个 div，单击时会获得高度...

css shadow-dom custom-element

回答 1 投票 0

在 Svelte 4 和 vite 项目中创建自定义元素的正确配置是什么？

完成以下步骤后通过 npm create vite@latest 创建 Svelte 项目 ├── @sveltejs/[email protected] ├── [email protected] └── [email protected] 将 App.svelte 更改为完成以下步骤后通过 npm create vite@latest 创建 Svelte 项目 ├── @sveltejs/[email protected] ├── [email protected] └── [email protected] 将 App.svelte 更改为 <svelte:options customElement="my-element" /> <script> export let character = '!' </script> <h1>my-element{character}</h1> <style> h1 { color: teal; } </style> 将 main.js 更改为 import App from './App.svelte' export default App 添加编译器选项vite.config import {defineConfig} from 'vite' import {svelte} from '@sveltejs/vite-plugin-svelte' // https://vitejs.dev/config/ export default defineConfig({ plugins: [svelte({ compilerOptions: { customElement: true, } })], }) 跑步npm run build dist目录包含以下文件 dist │ index.html │ vite.svg └───assets │ index-22b2453f.js 虽然似乎可以从生成的 .js 文件中导入和使用自定义元素，但我想知道为什么它不仅仅是一个 bundle.js 文件，如这个答案中经常描述的那样需要什么配置才能使用给定的“静态”名称生成一个 .js 文件，而不需要可以从中导入自定义元素的哈希值？我希望我正确理解你的问题，要生成单个“静态”包，请在 build.rollupOptions 中使用 vite.config.js。您可以在那里找到更多信息。根据您的示例，在步骤 #4 中，vite 的配置将如下所示： import {defineConfig} from 'vite' import {svelte} from '@sveltejs/vite-plugin-svelte' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ svelte({ compilerOptions: { customElement: true, }, }), ], build: { target: "esnext", rollupOptions: { input: { index: "./src/main.js", }, // single output: { format: "umd", chunkFileNames: `[name].[hash].js`, entryFileNames: "my-element.umd.js", // <-- dir: "dist", }, }, }, }); 然后您可以将文件添加到index.html中（文件位于public文件夹中）: <script type="module" src="my-element.umd.js" defer></script> 或者从 Svelte 组件导入它（文件位于 src 文件夹中）: import * as MyElement from './my-element.umd.js' 然后使用自定义元素： <my-element character="⚡" />

svelte vite custom-element

回答 1 投票 0

JS 可以像 SO 代码片段中的 iframe 一样隔离在影子 DOM 中吗？

SO 网站似乎使用 iframe 来运行代码片段。任何形式的 Web 组件都可以接受用户提供的 JavScript 并仅在影子 DOM 中独立运行吗？我尝试了一个简单的 sh...

javascript web-component shadow-dom custom-element

回答 1 投票 0

在 vue 自定义元素中使用 primevue

如何在 vue3 自定义元素中使用 primevue 组件？这是我的 vue3 组合+设置自定义元素。预期的行为是该按钮将是 primevue 风格的按钮并且具有...

javascript vue.js vuejs3 custom-element primevue

回答 1 投票 0

尝试向自定义元素添加一个名为“key”的属性，但 React 正在删除它

我正在 React 中构建一个静态站点（使用 Gatsby 框架）。该网站适用于瑜伽工作室，我需要将工作室预订表单小部件嵌入到页面上。该小部件由服务提供商提供...