Skip to content

Commit 4bbcb71

Browse files
Fix JS in component example to append new child (#1362)
* Example apps for custom components v2 * Add Tailwind example * Self-host Tailwind script * Append new child element
1 parent b91abb4 commit 4bbcb71

File tree

1 file changed

+11
-8
lines changed

1 file changed

+11
-8
lines changed

python/api-examples-source/components.custom_anchors.py

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,19 @@
11
import streamlit as st
22

3+
CSS = """
4+
a {
5+
color: var(--st-link-color) !important;
6+
}
7+
"""
8+
39
JS = """
410
export default function(component) {
511
const { data, setTriggerValue, parentElement } = component;
6-
parentElement.innerHTML = data;
7-
const links = parentElement.querySelectorAll('a');
12+
const newElement = document.createElement('div');
13+
parentElement.appendChild(newElement);
14+
newElement.innerHTML = data;
15+
16+
const links = newElement.querySelectorAll('a');
817
918
links.forEach((link) => {
1019
link.onclick = (e) => {
@@ -14,12 +23,6 @@
1423
}
1524
"""
1625

17-
CSS = """
18-
a {
19-
color: var(--st-link-color);
20-
}
21-
"""
22-
2326
my_component = st.components.v2.component(
2427
"inline_links",
2528
css=CSS,

0 commit comments

Comments
 (0)