Why does a custom element collapse?

Question

I try to define a custom field, containing either a SVG or a Canvas. But my example shows some strange rendering. I expect two boxes 400 pixel wide and 300 pixel high. But both boxes seem to collapse in different ways. How can I fix this?

class TestSvg extends HTMLElement
{
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});
    const container = document.createElement('svg');
    container.setAttribute('width', '400');
    container.setAttribute('height', '300');
    shadow.appendChild (container);
  }
}

class TestCanvas extends HTMLElement
{
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});
    const container = document.createElement('canvas');
    container.setAttribute('width', '400');
    container.setAttribute('height', '300');
    shadow.appendChild (container);
  }
}

customElements.define ('test-svg', TestSvg);
customElements.define ('test-canvas', TestCanvas);

test-svg, test-canvas {
  border: 1px solid black;
}

svg
<test-svg>
</test-svg>
canvas
<test-canvas>
</test-canvas>
end

Same without custom elements:

svg, canvas {
  border: 1px solid black;
}

svg
<svg width="400" height="300"></svg>
canvas
<canvas width="400" height="300"></canvas>
end

Why is there a difference between the version with custom elements and the version without custom elements?

there are 2 400x300 boxes w/o custom elements, because the browser recognizes svg and canvas. — curveball, Dec 16 '20 at 20:16
@curveball And why are they not recognized as a part of a custom element? — ceving, Dec 16 '20 at 20:33
you cannot create SVG elements with createElement you need to use createElementNS and specify the SVG namespace as the first argument. — Robert Longson, Dec 16 '20 at 21:07

score 1 · Accepted Answer · answered Dec 17 '20 at 00:25

Your SVG element is not being created correctly. It needs to be in the correct SVG namespace. Change it to this:
```
const container = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
```
By default, your custom elements will be display: inline. Set them to block or inline-block depending on your need.
```
test-svg, test-canvas {
  display: inline-block;
  border: 1px solid black;
}
```

Updated test:

class TestSvg extends HTMLElement
{
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});
    const container = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    container.setAttribute('width', '400');
    container.setAttribute('height', '300');
    shadow.appendChild (container);
  }
}

class TestCanvas extends HTMLElement
{
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});
    const container = document.createElement('canvas');
    container.setAttribute('width', '400');
    container.setAttribute('height', '300');
    shadow.appendChild (container);
  }
}

customElements.define ('test-svg', TestSvg);
customElements.define ('test-canvas', TestCanvas);

test-svg, test-canvas {
  display: inline-block;
  border: 1px solid black;
}

svg
<test-svg>
</test-svg>
canvas
<test-canvas>
</test-canvas>
end

Danny '365CSI' Engelman · Answer 2 · 2020-12-17T10:28:44.473

Good to see more people are combining Custom Elements and SVG, they are a good match

Your core problem was the SVG NameSpace, so Paul his answer is correct.

Some additional comments:

Your constructor can be optimized:

constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});
    const container = document.createElementNS('http://www.w3.org/2000/svg','svg');
    container.setAttribute('width', '400');
    container.setAttribute('height', '300');
    shadow.appendChild (container);
  }

super() returns the element scope
Google documentation that says to use super() first is wrong,
they mean: Call super() before you can use the 'this' scope reference.
attachShadow() boths sets AND returns this.shadowRoot for free
.appendChild() returns the created element

So you can chain everything:

constructor() {
    const container = super()
                        .attachShadow({mode:'open'})
                        .appendChild (document.createElementNS('http://www.w3.org/2000/svg','svg'));
    container.setAttribute('width', '400');
    container.setAttribute('height', '300');
  }

If you do not do anything special with this in memory Custom Element,
you can scrap the whole constructor and create the element with HTML in the connectedCallback

connectedCallback(){
  this.innerHTML = `<svg width='400' height='300' 
                         xmlns='http://www.w3.org/2000/svg' 
                         viewBox='0 0 20 20'></svg>`;
}

Note: I also ditched shadowDOM above; if you do want shadowDOM its:

connectedCallback(){
  this.attachShadow({mode:"open"})
      .innerHTML = `<svg width='400' height='300' 
                         xmlns='http://www.w3.org/2000/svg' 
                         viewBox='0 0 20 20'></svg>`;
}

There is another sizing problem

Depending on your Font family and size there will be a gutter below your inline-block SVG Custom Element (see RED below) to allow for pgjq characters that stick out below the base line.

To counter that you have to set vertical-align: top on the SVG element:

<style>
  body { font-size: 3em }
  svg-circle { background: RED }

  svg-circle svg {
    background: grey;
    display: inline-block;
    width: 80px;
  }
  #correct svg { vertical-align: top }
</style>
<div>
  <svg-circle radius="40%" color="green"></svg-circle>
  <svg-circle x="50%" y="100%" color="blue"></svg-circle>
  <svg-circle></svg-circle>
</div>
<div id="correct">
  <svg-circle radius="40%" color="green"></svg-circle>
  <svg-circle x="50%" y="100%" color="blue"></svg-circle>
  <svg-circle></svg-circle>
</div>
<script>
  customElements.define("svg-circle", class extends HTMLElement {
    static get observedAttributes() { return ["x", "y", "radius", "color"] }
    connectedCallback()             { this.render() }
    attributeChangedCallback()      { this.render() }
    render() {
      let [x = "50%",y = "50%",radius = "50%", color = "rebeccapurple"] = 
        this.constructor.observedAttributes.map(x => this.getAttribute(x) || undefined);
      this.innerHTML = `<svg viewBox='0 0 96 96'>
                          <circle cx='${x}' cy='${y}' r='${radius}' fill='${color}'/></svg>`;
    }
  });
</script>

Note: There is no shadowDOM attached to <svg-circle>, so the SVG inside can be styled with global CSS

Make it an IMG

If you do not want any CSS bleeding, and want to work with the SVG as if it is an image,
without pointer-events issues, then create an IMG:

this.innerHTML = `<img src="data:image/svg+xml,<svg viewBox='0 0 96 96'>
                       <circle cx='${x}' cy='${y}' r='${radius}' fill='${color}'/>
                       </svg>">`.replace(/#/g, "%23");

Note: The # is the only character that needs to be escaped here. In CSS url() usage you also need to escape the < and >

Add a grid

If you are going to create an Icon Toolbar or Chessboard like layout with SVGs, add a grid:

  #correct {
    display: grid;
    grid-template-columns: repeat(3, 80px);
  }

  svg-circle svg {
    background: grey;
    display: inline-block;
    width: 100%;
    height: 100%;
  }

Pavan Chandaka · Answer 3 · 2020-12-16T20:42:59.417

0

In the first custom element TestSvg, change the element type from svg to canvas

const container = document.createElement('canvas');

HTML elements reference

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

'canvas' is an HTML element. where as 'svg' is not. 'svg' is Container element, structure element

edited Dec 16 '20 at 20:42

answered Dec 16 '20 at 20:11

Pavan Chandaka

11,671
5
26
34

I did it in `TestCanvas` and it does not work either. – ceving Dec 16 '20 at 20:16
Why? You can copy it to your answer. – ceving Dec 16 '20 at 20:19
Ok. thats what I did, yo need to modify TestSVG class – Pavan Chandaka Dec 16 '20 at 20:20
In both custom elements "TestSVG" and "TestCanvas", the element type should be "canvas" – Pavan Chandaka Dec 16 '20 at 20:23
No! TestSvg should feature a SVG and TestCanvas should feature a Canvas. – ceving Dec 16 '20 at 20:24
Look at the valid HTML elements , link provided in answer – Pavan Chandaka Dec 16 '20 at 20:26
`svg` is also a valid element: https://developer.mozilla.org/de/docs/Web/SVG/Element/svg – ceving Dec 16 '20 at 20:30
may be you can try , if you want or render in – Pavan Chandaka Dec 16 '20 at 20:30
I doubt if "document.createElement" can take – Pavan Chandaka Dec 16 '20 at 20:35
Scrolldown in the link you posted in comments for 'svg' element. you can see that it is classified as Container element, structure element. – Pavan Chandaka Dec 16 '20 at 20:37

Why does a custom element collapse?

3 Answers3

There is another sizing problem

Make it an IMG

Add a grid