Styjun

Washer drain pipe overflow

How to align underlines in a cases environment

Is the schwa sound consistent?

Why does a C.D.F need to be right-continuous?

What is the significance of 4200 BCE in context of farming replacing foraging in Europe?

The lexical root of the perfect tense forms differs from the lexical root of the infinitive form

We are two immediate neighbors who forged our own powers to form concatenated relationship. Who are we?

Could one theoretically use the expansion of the universe to travel through it? At least in one direction?

Two researchers want to work on the same extension to my paper. Who to help?

How could we transfer large amounts of energy sourced in space to Earth?

How did Thanos not realise this had happened at the end of Endgame?

How to select certain lines (n, n+4, n+8, n+12...) from the file?

Is Simic Ascendancy triggered by Awakening of Vitu-Ghazi?

Is there any evidence to support the claim that the United States was "suckered into WW1" by Zionists, made by Benjamin Freedman in his 1961 speech?

Was there ever any real use for a 6800-based Apple I?

Is there enough time to Planar Bind a creature conjured by a 1-hour-duration spell?

Why does the Earth follow an elliptical trajectory rather than a parabolic one?

Are there variations of the regular runtimes of the Big-O-Notation?

How do I compare the result of "1d20+x, with advantage" to "1d20+y, without advantage", assuming x < y?

Why can't RGB or bicolour LEDs produce a decent yellow?

Why was this sacrifice sufficient?

Looking for a simple way to manipulate one column of a matrix

International Code of Ethics for order of co-authors in research papers

Is there a faster way to calculate Abs[z]^2 numerically?

Custom element with shadow not rendering

Why don't self-closing script elements work?How do I detect a click outside an element?How do I check if an element is hidden in jQuery?Event binding on dynamically created elements?Retrieve the position (X,Y) of an HTML elementCreating a div element in jQueryHow can I select an element with multiple classes in jQuery?How to move an element into another element?How do I remove a particular element from an array in JavaScript?jQuery scroll to element

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

2

I'm trying to make a custom element with a shadow, but when I add a shadow, the content of the element doesn't render. Here's my code:

JavaScript:

class CustomElement extends HTMLElement 
 constructor ()
 super();
 var shadow = this.attachShadow(mode: 'open');
 var content = document.createElement("DIV");
 content.innerText = "hello world";
 shadow.appendChild(content);
 

customElements.define("custom-element", CustomElement);

HTML:

<custom-element>blah blah blah</custom-element>

But all it renders is the text "hello world"

javascript html shadow-dom custom-element

share|improve this question

edited May 2 at 11:42

Supersharp

15.4k23676

asked Mar 23 at 11:15

kyleplokyleplo

6528

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  codepen.io/Utsav91/pen/eXxmdZ?&editable=true On codepen it works, I have removed my answer though.
  
  – Utsav Patel
  Mar 24 at 3:10
  

  
  
  
  

add a comment | 

2

I'm trying to make a custom element with a shadow, but when I add a shadow, the content of the element doesn't render. Here's my code:

JavaScript:

class CustomElement extends HTMLElement 
 constructor ()
 super();
 var shadow = this.attachShadow(mode: 'open');
 var content = document.createElement("DIV");
 content.innerText = "hello world";
 shadow.appendChild(content);
 

customElements.define("custom-element", CustomElement);

HTML:

<custom-element>blah blah blah</custom-element>

But all it renders is the text "hello world"

javascript html shadow-dom custom-element

share|improve this question

edited May 2 at 11:42

Supersharp

15.4k23676

asked Mar 23 at 11:15

kyleplokyleplo

6528

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  codepen.io/Utsav91/pen/eXxmdZ?&editable=true On codepen it works, I have removed my answer though.
  
  – Utsav Patel
  Mar 24 at 3:10
  

  
  
  
  

add a comment | 

I'm trying to make a custom element with a shadow, but when I add a shadow, the content of the element doesn't render. Here's my code:

JavaScript:

class CustomElement extends HTMLElement 
 constructor ()
 super();
 var shadow = this.attachShadow(mode: 'open');
 var content = document.createElement("DIV");
 content.innerText = "hello world";
 shadow.appendChild(content);
 

customElements.define("custom-element", CustomElement);

HTML:

<custom-element>blah blah blah</custom-element>

But all it renders is the text "hello world"

javascript html shadow-dom custom-element

share|improve this question

edited May 2 at 11:42

Supersharp

15.4k23676

asked Mar 23 at 11:15

kyleplokyleplo

6528

class CustomElement extends HTMLElement 
 constructor ()
 super();
 var shadow = this.attachShadow(mode: 'open');
 var content = document.createElement("DIV");
 content.innerText = "hello world";
 shadow.appendChild(content);
 

customElements.define("custom-element", CustomElement);

<custom-element>blah blah blah</custom-element>

share|improve this question

edited May 2 at 11:42

Supersharp

15.4k23676

asked Mar 23 at 11:15

kyleplokyleplo

6528

share|improve this question

edited May 2 at 11:42

Supersharp

15.4k23676

asked Mar 23 at 11:15

kyleplokyleplo

6528

edited May 2 at 11:42

Supersharp

15.4k23676

edited May 2 at 11:42

Supersharp

15.4k23676

asked Mar 23 at 11:15

kyleplokyleplo

6528

asked Mar 23 at 11:15

kyleplokyleplo

6528

1 Answer
1

active

oldest

votes

2

It's the normal behaviour of a Shadow DOM : the Shadow DOM content masks the original content (called the Light DOM).

If you want to reveal the Light DOM content, use <slot> in the Shadow DOM.

class CustomElement extends HTMLElement 
 constructor ()
 super();
 var shadow = this.attachShadow(mode: 'open');
 var content = document.createElement("DIV");
 content.innerHTML = "hello world: <br> <slot></slot>";
 shadow.appendChild(content);
 

customElements.define("custom-element", CustomElement);

<custom-element>blah blah blah</custom-element>

share|improve this answer

answered Mar 23 at 14:43

SupersharpSupersharp

15.4k23676

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55313124%2fcustom-element-with-shadow-not-rendering%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

It's the normal behaviour of a Shadow DOM : the Shadow DOM content masks the original content (called the Light DOM).

If you want to reveal the Light DOM content, use <slot> in the Shadow DOM.

class CustomElement extends HTMLElement 
 constructor ()
 super();
 var shadow = this.attachShadow(mode: 'open');
 var content = document.createElement("DIV");
 content.innerHTML = "hello world: <br> <slot></slot>";
 shadow.appendChild(content);
 

customElements.define("custom-element", CustomElement);

<custom-element>blah blah blah</custom-element>

share|improve this answer

answered Mar 23 at 14:43

SupersharpSupersharp

15.4k23676

add a comment | 

2

It's the normal behaviour of a Shadow DOM : the Shadow DOM content masks the original content (called the Light DOM).

If you want to reveal the Light DOM content, use <slot> in the Shadow DOM.

class CustomElement extends HTMLElement 
 constructor ()
 super();
 var shadow = this.attachShadow(mode: 'open');
 var content = document.createElement("DIV");
 content.innerHTML = "hello world: <br> <slot></slot>";
 shadow.appendChild(content);
 

customElements.define("custom-element", CustomElement);

<custom-element>blah blah blah</custom-element>

share|improve this answer

answered Mar 23 at 14:43

SupersharpSupersharp

15.4k23676

add a comment | 

It's the normal behaviour of a Shadow DOM : the Shadow DOM content masks the original content (called the Light DOM).

If you want to reveal the Light DOM content, use <slot> in the Shadow DOM.

class CustomElement extends HTMLElement 
 constructor ()
 super();
 var shadow = this.attachShadow(mode: 'open');
 var content = document.createElement("DIV");
 content.innerHTML = "hello world: <br> <slot></slot>";
 shadow.appendChild(content);
 

customElements.define("custom-element", CustomElement);

<custom-element>blah blah blah</custom-element>

share|improve this answer

answered Mar 23 at 14:43

SupersharpSupersharp

15.4k23676

class CustomElement extends HTMLElement 
 constructor ()
 super();
 var shadow = this.attachShadow(mode: 'open');
 var content = document.createElement("DIV");
 content.innerHTML = "hello world: <br> <slot></slot>";
 shadow.appendChild(content);
 

customElements.define("custom-element", CustomElement);

<custom-element>blah blah blah</custom-element>

class CustomElement extends HTMLElement 
 constructor ()
 super();
 var shadow = this.attachShadow(mode: 'open');
 var content = document.createElement("DIV");
 content.innerHTML = "hello world: <br> <slot></slot>";
 shadow.appendChild(content);
 

customElements.define("custom-element", CustomElement);

<custom-element>blah blah blah</custom-element>

class CustomElement extends HTMLElement 
 constructor ()
 super();
 var shadow = this.attachShadow(mode: 'open');
 var content = document.createElement("DIV");
 content.innerHTML = "hello world: <br> <slot></slot>";
 shadow.appendChild(content);
 

customElements.define("custom-element", CustomElement);

<custom-element>blah blah blah</custom-element>

share|improve this answer

answered Mar 23 at 14:43

SupersharpSupersharp

15.4k23676

answered Mar 23 at 14:43

SupersharpSupersharp

15.4k23676

answered Mar 23 at 14:43

SupersharpSupersharp

15.4k23676