Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add css hash to custom element rendered with svelte:element #12715

Merged
merged 4 commits into from
Aug 3, 2024
Merged

fix: add css hash to custom element rendered with svelte:element #12715

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift click to select a range
4e079b5
fix: add css hash to custom element rendered with `svelte:element`
paoloricciuti Aug 2, 2024
8bafc73
simplify
Rich-Harris Aug 3, 2024
906eb94
skip arg where possible
Rich-Harris Aug 3, 2024
7599df0
drive-by improvements — remove some unnecessary arguments where possible
Rich-Harris Aug 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
fix: add css hash to custom element rendered with svelte:element
  • Loading branch information
@paoloricciuti
paoloricciuti committed Aug 2, 2024
commit 4e079b5eb29fd533023df65a12d65114bde4c1be
5 changes: 5 additions & 0 deletions .changeset/chilly-carpets-switch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 1,5 @@
---
'svelte': patch
---

fix: add css hash to custom element rendered with `svelte:element`
9 changes: 7 additions & 2 deletions packages/svelte/src/internal/client/dom/elements/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,15 129,20 @@ export function set_xlink_attribute(dom, attribute, value) {
* @param {any} node
* @param {string} prop
* @param {any} value
* @param {string} [css_hash]
*/
export function set_custom_element_data(node, prop, value) {
export function set_custom_element_data(node, prop, value, css_hash) {
if (prop in node) {
var curr_val = node[prop];
var next_val = typeof curr_val === 'boolean' && value === '' ? true : value;
if (typeof curr_val !== 'object' || curr_val !== next_val) {
node[prop] = next_val;
}
} else {
if (css_hash && css_hash.length !== 0 && prop === 'class') {
if (value) value = ' ';
value = css_hash;
}
set_attribute(node, prop, value);
}
}
Expand Down Expand Up @@ -320,7 325,7 @@ export function set_dynamic_element_attributes(node, prev, next, css_hash) {
}

for (key in next) {
set_custom_element_data(node, key, next[key]);
set_custom_element_data(node, key, next[key], css_hash);
}

return next;
Expand Down
14 changes: 14 additions & 0 deletions ...ages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/_config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 1,14 @@
import { ok, test } from '../../test';

export default test({
html: `<custom-element class="red svelte-p153w3"></custom-element><custom-element class="red svelte-p153w3"></custom-element>`,

async test({ assert, target }) {
const [el, el2] = target.querySelectorAll('custom-element');
ok(el);
ok(el2);

assert.deepEqual(el.className, 'red svelte-p153w3');
assert.deepEqual(el2.className, 'red svelte-p153w3');
}
});
8 changes: 8 additions & 0 deletions ...ges/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/main.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 1,8 @@
<svelte:element this={'custom-element'} class="red"></svelte:element>
<custom-element class="red"></custom-element>

<style>
.red {
color: red;
}
</style>
Loading