Exploring ways to access elements within shadow-root (open) in Angular using SVG.js

I'm currently tackling a project involving Angular Elements. Within this specialized component, my goal is to incorporate SVG.js 3+. However, due to the necessity of utilizing ViewEncapsulation.ShadowDom in my component, I am encountering challenges when initializing SVG.js.

The typical procedure for creating an SVG and drawing a rectangle would go something like this:

this.draw = SVG().addTo("#SVGContainer").viewbox(0, 0, 300, 140);
this.draw.rect(100, 100).move(100, 50).fill('#f06')

The issue lies in the fact that 

.addTo("#SVGContainer")
can only detect elements that are not within the shadow-root. I conducted tests with both components using shadow-root and those without. As expected, SVG.js functioned properly in the Angular Project without Shadow Dom but failed in the Project integrated with shadow-root.

I am aware that using 

container.shadowRoot.querySelector(".test").innerHTML
enables access to shadow elements. However, the .addTo() method restricts me to passing the ID of the element, thus preventing direct transmission of the DOM element itself.

Due to the mandatory inclusion of ViewEncapsulation.ShadowDom in my new custom web component, I am left pondering whether it is feasible to pass shadow-dom elements to SVG.js or if this remains an insurmountable obstacle.

javascriptangulartypescriptshadow-domsvg.js

Answer №1

Resolved the issue by following a suggestion to create an Github Issue, where I discovered a helpful Github post. A user mentioned how great it is that they support shadow dom and allow passing elements directly, but recommended better documentation.

The user pointed out that passing elements directly is possible, so I gave it another try and it worked successfully this time. I set up a ViewChild Reference for my Container in this way:

 @ViewChild('svgContainer') svgContainer: any;

I then passed it to the .addTo() method like this:

this.draw = SVG().addTo(this.svgContainer.nativeElement).viewbox(0, 0, 300, 140);

There were two reasons why it didn't work initially. Firstly, I couldn't find clear documentation stating that passing the element itself was allowed. Secondly, during my initial attempt, I forgot to include .nativeElement.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with setting values in Angular2 when using IE 11 and shims included

First off, I want to clarify that I have indeed added the shims in my index.html file. <script src="node_modules/es6-shim/es6-shim.min.js"></script> <script src="node_modules/systemjs/dist/system-polyfills.js"></script> <script ...

angularinternet-explorer-11

Tips for utilizing Async/Await within an expressjs router

Having trouble with Async/Await in my Nodejs project. I'm a beginner with Nodejs and facing an issue connecting to my mongodb collection through my repository. When I integrate my controller with the repository, I end up getting a null response. Take ...

javascriptnode.jsexpressasynchronousmongoose

Guidelines for attaining seamless motion animation utilizing devicemotion rotationRate information

I am utilizing the rotationRate data obtained from the devicemotion eventListener to manipulate a three.js scene by tilting. The scene does respond to the data accurately in terms of angle adjustments, but it produces an unsmooth motion effect. Is there a ...

javascriptthree.js

Refilling state through an NgRx Effect

I am facing a situation where I have JSON data stored in my effect, which was initially generated using JSON.stringify(state), and now I need to insert that JSON string back into the state in order to update the application. As someone new to Angular and N ...

angularreduxngrxngrx-storengrx-effects

Why is it necessary to include "ref" in the mongoose schema below? What potential consequences could arise if it is omitted?

attendedEvents: [{ type: Schema.Types.ObjectId, ref: 'Event' }] ...

javascriptmongodbmongoosemern

Encountering 404 Errors while Attempting to Reach API Endpoint in an Express.js Application Hosted on cPanel

I have a Node.js application running on cPanel, and I'm facing 404 errors when trying to access an API endpoint within my app. Let me provide you with the setup details: Directory Structure: public_html/ server.mjs index.html node_modules ...

javascriptnode.jsexpresscpanel

What is the best way to keep an item from list A after it has been moved to list B using PrimeNg's drag and drop feature?

I am facing an issue with the drag and drop feature in PrimeNg. I have a container that contains both a table and an unordered list. My goal is to be able to drag an element from the unordered list and drop it into the table, while still retaining the drag ...

angularprimeng

What is the best way to find the actual position of this user within my array?

I found this example in the Vue JS documentation here When using a filtered v-for, how can I obtain the actual index of a user in the array, rather than the index of the current iteration? <div id="filter-by-example"> <ul> <li v-for= ...

javascriptarraysvue.js

Tips on updating the arrow icon after clicking on a dropdown menu

HTML: <div class="customSelectContainer"> <ul> <li class="initial">Choose</li> <li data-value="value 1">Option 1</li> <li data-value="value 2">Option 2& ...

javascriptjqueryhtmlcss

An API built with Mongoose, Express, and Node.js is currently only able to send a single image

I have a buffer array that needs to be converted into images and sent to the user. The issue is that the current code only sends one image: const express = require("express"); const asyncHandler = require("express-async-handler"); const ...

javascriptexpresssharp

Error in browser caused by JQuery JavaScript, not Dreamweaver

I need help creating a webpage that can extract and display recent earthquake data based on user input location on Google Maps. I have been using Dreamweaver to test my code, and everything functions perfectly when I use the live webpage feature within th ...

javascriptjqueryhtmlajaxjson

The elusive cookie in NodeJS remained just out of reach

After setting a cookie using the code below: router.get("/addCartToCookie", function(req, res) { let options = { maxAge: 1000 * 60 * 15, httpOnly: true, }; let cartData = { name: "test cookie", slug: slugify(&quo ...

javascriptnode.jsexpresscookies

Creating a setup with Angular 2+ coupled with Webpack and a Nodejs

I have successfully configured Angular2+webpack along with NodeJs for the backend. Here is a basic setup overview: webpack.config.js: var webpack = require('webpack') var HtmlWebpackPlugin = require('html-webpack-plugin') var Extract ...

node.jsangulartypescriptwebpack

Bootstrap wysiwyg5 editor validation: Ensuring accuracy in your content creation

Currently, I have integrated the Bootstrap wysiwyg5 editor into a form. One of the fields in this form, specifically the text area, is mandatory and cannot be left empty. I am facing a challenge in validating whether the user has entered any content into t ...

javascriptjquerytwitter-bootstrapwysihtml5

Can you please explain how to indicate a modification in a JSON object with Polymer, transferring information from Javascript, and subsequently displaying child elements?

Currently, I am creating a JSON file that contains a random assortment of X's and O's. My goal is to display these elements in a grid format using a custom Polymer element. Initially, everything works fine as I can see a new grid generated each t ...

javascriptjsonobjectpolymerrerender

In JavaScript, how can we determine the structure of an object similar to the str function in R language?

One of the great features in R is the use of the str function, which allows you to examine the structure of an object. For example, you can use it to analyze the structure of a parsed json object like this (I'm using json as an illustration): txt = ...

javascriptjqueryrinspect

JavaScript WYSIWYG Algorithm

Despite my searches on SO, it appears that most questions revolve around simply making a div editable using contenteditable="true". I am interested in finding the most effective method for tracking all formatting tags applied to a document. Merely togglin ...

javascriptjqueryhtmlcss

The curly braces in AngularJS are not resolving as expected, however, the ng-bind directive is functioning properly

I'm currently working on a Django application and utilizing AngularJS for my frontend. I have a straightforward piece of code that looks like this: <div class="vert-carousel" ng-controller="PrizeController"> <div class="gallery-cell" n ...

javascriptangularjsdjango

What could be causing the npm server error in my Vue.js application?

After recently setting up Node.js and Vue.js, I decided to dive into my first project on Vue titled test. As part of the process, I attempted to configure the server using the command: npm run server However, I encountered the following error message: C ...

javascriptnode.jsvue.jsnpm

Techniques for retrieving elements from HTML using jQuery

I'm developing a feature that allows users to add videos to playlists by clicking on a link in a popover. The challenge I'm facing is extracting the video_id and the selected playlist when the user interacts with the popover. Any tips on how to a ...

javascriptjqueryhtmlcssajax