Skip to content

Commit 4b8472d

Browse files
RamAddictRamAddict
committed
initial commit
0 parents  commit 4b8472d

27 files changed

+4236
-0
lines changed

‎.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎.npmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
engine-strict=true

‎.nvmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v16.16.0

‎.vscode/extensions.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["svelte.svelte-vscode"]
3+
}

‎README.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Issue with reactivity on store binding of *this* in custom element.
2+
3+
This is a template created to demonstrate an issue I encountered. This template is from [Svelte-add](https://github.com/svelte-add/svelte-add) but I slightly modified it and published my own template [here](https://github.com/RamAddict/svelte-webcomponent-template) which I use to generate custom elements.
4+
5+
# Build
6+
Clone this repository then inside it run:
7+
8+
npm i
9+
npm run dev
10+
11+
You will see that the change color button, on click, changes the color of the other button by adding a class to it that turns it red.
12+
13+
This works as intended. The issue arises when trying to do the same in the context of a custom element. See below
14+
# Generate custom element
15+
To generate the custom element, run:
16+
17+
npm build
18+
Then move the contents of the dist folder into the folder where you would like to use your web component. Then import the script and declare the component in the html file.
19+
20+
I've provided an html file in the client folder so this process can be done by running
21+
22+
npm run build-and-copy
23+
24+
Once that is done, open the index (I use Vscode Live server) and you should see the 2 buttons.
25+
26+
Now, as you can see, clicking the change color button doesn't change the color. If you open the console, you still see the console log indicating that the listener function is still being invoked.

‎client/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>My website</title>
5+
<link rel="stylesheet" href="./style.css">
6+
<script src="./test.js" type="module"></script>
7+
<script>
8+
</script>
9+
<style>
10+
11+
</style>
12+
</head>
13+
14+
<body>
15+
<cool-page/>
16+
</body>
17+
</html>

‎client/style.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)