bug: unable to render foreignObject with attributes inside SVG

Open
#3,193 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
38/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
typescript
Domain
frontend, web-dev

Research direction

Start with the linked reproduction project and Stencil render functions, focusing on how SVG foreignObject attributes width, height, x, and y are handled. Reproduce the issue using the example component, then verify that foreignObject renders with those attributes without requiring the setAttribute workaround.

Written by the indexing model from the issue text.

Description

Bug: Validated Has Workaround
Prerequisites
Stencil Version

v2.x

Current Behavior

foreignObject with attributes in SVG cannot be rendered.

Stencil expect the foreignObject to be provided as foreign-object in order to be able to render attributes but, the browser expect the foreignObject to be provided as <foreignObject/> and not <foreign-object/>.

It seems Stencil has an issue only with a subset of SVGAttributes respectively width, height, x and y.

Expected Behavior

Being able to use <foreignObject/> with attributes withing svg in Stencil render functions.

Steps to Reproduce
import { Component, h } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  render() {
    return (
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" x="0" y="0" height="300" width="300">
        <circle r="142" cx="150" cy="150" fill="none" stroke="#000000" stroke-width="2" />

        <foreignObject x={0} y={0} width="200" height="200">
          <p>Hello World</p>
        </foreignObject>
      </svg>
    );
  }
}
Code Reproduction URL

https://github.com/peterpeterparker/stencil-svg-foreignobject

Additional Information
Notes

a fixed issue regarding foreign object has been opened in the past, see #1733

Screenshots
Capture d’écran 2021-12-20 à 09 43 49 Capture d’écran 2021-12-20 à 09 47 29
Workaround
import {Component, h, ComponentInterface} from '@stencil/core';

@Component({
  tag: 'deckgo-social-img',
  styleUrl: 'social-img.scss',
  shadow: true
})
export class SocialImg implements ComponentInterface {
  private foreignObjectRef!: SVGForeignObjectElement;

  componentDidLoad() {
    this.setForeignObjectAttributes();
  }

  private setForeignObjectAttributes() {
    this.foreignObjectRef?.setAttribute('x', '0');
    this.foreignObjectRef?.setAttribute('y', '0');
    this.foreignObjectRef?.setAttribute('width', '200');
    this.foreignObjectRef?.setAttribute('height', '100');
  }

  render() {
    return (
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" x="0" y="0" height="300" width="300">
        <circle r="142" cx="150" cy="150" fill="none" stroke="#000000" stroke-width="2" />

        <foreignObject ref={(el) => (this.foreignObjectRef = el as SVGForeignObjectElement)}>
          <p>Hello World</p>
        </foreignObject>
      </svg>
    );
  }
}
Dominant language
TypeScript
Stars
13.1k
Forks
855
Avg merge
4h 7m
Merged PRs (30d)
44

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from stenciljs/core

All issues in stenciljs/core

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.