Element for <slot>?

Is it possible to not pass a wrapper element to a <slot />? It looks like I have to use a wrapper element, otherwise I couldnt define the slot attribute for my child.
<my-custom-element>
<fragment slot="title">Hello</fragment>
</my-custom-element>
<my-custom-element>
<fragment slot="title">Hello</fragment>
</my-custom-element>
Is there something like a fragment element?
R
reddogg47615d ago
Do you have example markup and/or js?
W
Wonderbear14d ago
https://jsfiddle.net/hndqb12s/1/ Here I must use a wrapping element (<div>) to apple the title to the slot. Now the html structure is
h1 -> div -> TextNode('Hello')
h1 -> div -> TextNode('Hello')
But I want its like
h1 -> TextMpde('Hello')
h1 -> TextMpde('Hello')
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
R
reddogg47613d ago
appending children is pretty easy. I see the issue now, you don't want a div element in the shadow dom. It looks like it needs some element container to be there at all, see this:
class MyExample extends HTMLElement {
constructor() {
super();

this.shadow = this.attachShadow({mode: 'open'});

this.shadow.innerHTML = `
<h1><slot name="title" /></h1>
`;
}
}
customElements.define('my-example', MyExample);

let elementContainer = document.querySelector("my-example div");
let COMMENT = document.createElement("div")
COMMENT.innerText = "Hello Two";
elementContainer.append(COMMENT);
elementContainer.innerHTML = elementContainer;
class MyExample extends HTMLElement {
constructor() {
super();

this.shadow = this.attachShadow({mode: 'open'});

this.shadow.innerHTML = `
<h1><slot name="title" /></h1>
`;
}
}
customElements.define('my-example', MyExample);

let elementContainer = document.querySelector("my-example div");
let COMMENT = document.createElement("div")
COMMENT.innerText = "Hello Two";
elementContainer.append(COMMENT);
elementContainer.innerHTML = elementContainer;
I added a new element to the slot without issue. Then I tried to reassign the slot, but the custom element doesn't redefine at the last line
R
reddogg47613d ago
No description
R
reddogg47613d ago
comment out the last line because i broke it, then the elements are added in. the wrapper is defined in the custom element, though
A
Aoi12d ago
It is not recommended to use innerHtml with user generated content. This can lead to XSS vulnerability.
R
reddogg47612d ago
that's a good catch, Aoi. I'm vulnerable to cross site scripting here because I used it in a global scope. --> the comment out will fix that 😄
Want results from more Discord servers?
Add your server
More Posts
overflow while body does not have an heightwhy i am facing overflow problem but when i give body height of 100vh the overflow goes awayDoing responsive text by using media queries on :root to change the font size for smaller screens.While trying to figure out a good way to do responsive text without manually setting font size usingHow to fix this snap dynamic horizontall scroll effect?I'm trying to make an effect where you firstly scroll verticall, then when reaching a certain point Issue with Making Child Div Inherit Height from Parent <td> without js or absolute positning.I'm facing a problem with making a child div (.auto-box) inherit the height of its parent <td> in HTColor pngMy restraints are kind of weird, but I have game file icons that I want to port to the browser. Its How do i design something like thisI am trying to design this just using div and inside this div ( span ) how can i get the same resultquotes within html attributehow does the browser know which quote ends the attribute value?Card positioning inside a grid container, we want the price and buttons to be the same for each cardhttps://github.com/callum-laing/shopping-site/tree/main/app As you can see in the image, the buttonTrying to align every card so that the button?in before someone mentions the unfinished title. https://github.com/callum-laing/shopping-site/treeTailwind helpI use Tailwind and would like to display the 2 Li elements next to each other with a small distance What's a modern simple logical layout I can use for the main logo?I'm working on a website for my dads business and I just want to keep it really clean and modern. ThHelp with side navigation/sidebarI’m new to JavaScript and I’ve been working on personal projects trying to improve my skills. Couldbackground scrolling when menu is openHello, does anybody know, how to stop background scrolling when you open side menu? I've tried overfescaping the wrapperHey, is there a way to escape a wrapper on one side without using grid? I'm aware Kevin has made a vSome serious problems with my CSSSo, I have started building a site and I have got as far as the navigation, when I made it a few dayScroll Shadow in CSSWhen I scroll the white shadow is coming from below. How to make this with CSS. https://www.harpersOverflow-y: auto makes x-axis scrollbar appearHi folks, I have a react Sidebar component with scss styles. The sidebar has the main list 'sidebar_minFn confusionCodePen: https://codepen.io/Ceecee-Hart/pen/dyLZrKb I'm not sure where this extra space is coming f