WebReflection / WebReflection/linkedom
Value of a foreign input element is an attribue
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 2.1k
- Forks
- 104
- PR merge metrics
- No merged PRs in 30d
Description
Dear,
First of all thank for sharing this nice library!
I have an issue when using an html input element as foreign object inside an svg drawing. Not sure if there is anything wrong with this library, or just me doing something not correctly...
BTW if you are wondering why such foreign objects are used, you can here see a demo animation on my wiki to see how it can be used for example for floorplans in home automation.
Case 1: input elements (ok)
I set a default value "Initial" to an input element:
let html = '<html><head></head><body><input id="my_input" value="initial"></body></html>'
let parser = new DOMParser()
let doc = parser.parseFromString(html, 'text/html')
let my_input = doc.querySelector('#my_input')
let value = my_input.value
Both in a browser and using Linkedom the element.value contains that default value:
Case 2: input elements as foreign object in svg (nok)
I set a default value "Initial" to an input element, which is a foreign object inside an svg drawing:
let html = '<svg xmlns="http://www.w3.org/2000/svg"><foreignObject><input id="my_input" value="initial" xmlns="http://www.w3.org/1999/xhtml"></foreignObject></svg>'
let parser = new DOMParser()
let doc = parser.parseFromString(html, 'image/svg+xml')
let my_input = doc.querySelector('#my_input')
let value = my_input.value
When running this in a browser, the element.value still contains that default value (as expected):
However when running this code in Linkedom, the element.value is undefined. And instead the "initial" is stored inside an attribute with name "value":
Hopefully somebody sees what I am doing wrong.
Thanks!!
Bart
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the two DOMParser reproductions from the issue, comparing the HTML and image/svg+xml parsing paths for the foreignObject input. Trace how the parsed input exposes its value property versus its value attribute. Done means the SVG case returns the initial value through my_input.value, matching browser behavior, with regression coverage for the reproduction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100