You are limited to using a maximum of two custom tags within a custom div

Question

You are limited to using a maximum of two custom tags within a custom div

I came up with this code that is supposed to style the elements differently based on their tag names. However, when I tested it, the styling did not work as expected. For example, 'London' should be displayed as a large and bold h1 text, while the other two should be h2 texts. But instead, everything shows up as normal text. Additionally, if I use only two elements in the weather-app, they display correctly, but adding more than two causes issues. Another problem I noticed is that when using the same element name twice, only the first instance gets styled properly, while the second appears as regular text. I'm seeking help in identifying and fixing these issues. Any advice or guidance would be greatly appreciated. Thank you!

javascript jquery html css dom

Answer 1

Answer №1

It seems like this solution may fit your needs. The issue appears to be related to the shadow.appendChild(). Consider using shadow.host instead.

const h1 = (tag) => {
  const ptag = document.querySelector(tag);
  const shadow = ptag.attachShadow({
    mode: 'open'
  });
  const h1 = document.createElement('h1');
  h1.innerHTML = ptag.innerHTML;
  shadow.host.parentNode.replaceChild(h1,shadow.host);
}

Additionally, replace .appendChild() with .replaceChild().

Check out the Demo below:

const h1 = (tag) => {
  const ptag = document.querySelector(tag);
  const shadow = ptag.attachShadow({
    mode: 'open'
  });
  const h1 = document.createElement('h1');
  h1.innerHTML = ptag.innerHTML;
  h1.style.color = "blue";
  shadow.host.parentNode.replaceChild(h1,shadow.host);
}
const h2 = (tag) => {
  const ptag = document.querySelector(tag);
  const shadow = ptag.attachShadow({
    mode: 'open'
  });
  const h2 = document.createElement('h2');
  h2.innerHTML = ptag.innerHTML;
  shadow.host.parentNode.replaceChild(h2,shadow.host);
}
const div = (tag) => {
  const ptag = document.querySelector(tag);
  const shadow = ptag.attachShadow({
    mode: 'closed'
  });
  const div = document.createElement('div');
  div.innerHTML = ptag.innerHTML;
  shadow.host.parentNode.replaceChild(div,shadow.host);
}
h1('city-name');
h2('we-data');
h2('temp-data');
h1('city-name');
div('weather-app');

<weather-app>
  <city-name>London</city-name>
  <we-data>Rains</we-data>
  <temp-data>15 C</temp-data>
  <city-name>Hi. Does thhis look like h1 text?</city-name>
</weather-app>

Answer 2

It seems like this solution may fit your needs. The issue appears to be related to the shadow.appendChild(). Consider using shadow.host instead.

const h1 = (tag) => {
  const ptag = document.querySelector(tag);
  const shadow = ptag.attachShadow({
    mode: 'open'
  });
  const h1 = document.createElement('h1');
  h1.innerHTML = ptag.innerHTML;
  shadow.host.parentNode.replaceChild(h1,shadow.host);
}

Additionally, replace .appendChild() with .replaceChild().

Check out the Demo below:

const h1 = (tag) => {
  const ptag = document.querySelector(tag);
  const shadow = ptag.attachShadow({
    mode: 'open'
  });
  const h1 = document.createElement('h1');
  h1.innerHTML = ptag.innerHTML;
  h1.style.color = "blue";
  shadow.host.parentNode.replaceChild(h1,shadow.host);
}
const h2 = (tag) => {
  const ptag = document.querySelector(tag);
  const shadow = ptag.attachShadow({
    mode: 'open'
  });
  const h2 = document.createElement('h2');
  h2.innerHTML = ptag.innerHTML;
  shadow.host.parentNode.replaceChild(h2,shadow.host);
}
const div = (tag) => {
  const ptag = document.querySelector(tag);
  const shadow = ptag.attachShadow({
    mode: 'closed'
  });
  const div = document.createElement('div');
  div.innerHTML = ptag.innerHTML;
  shadow.host.parentNode.replaceChild(div,shadow.host);
}
h1('city-name');
h2('we-data');
h2('temp-data');
h1('city-name');
div('weather-app');

<weather-app>
  <city-name>London</city-name>
  <we-data>Rains</we-data>
  <temp-data>15 C</temp-data>
  <city-name>Hi. Does thhis look like h1 text?</city-name>
</weather-app>

Answer 3

Answer №2

To achieve the desired outcome, consider utilizing shadow.host and replaceChild(), as suggested in a previous response by @Carsten Løvbo Andersen.
.querySelector() retrieves the first matching element, while .querySelectorAll() gathers all matches, necessitating the use of .querySelectorAll().
The functions for h1, h2, and div share notable similarities - here's an adjusted version:

const foo = (elementTag, shadowMode) => tag => {
  const query = document.querySelectorAll(tag);
  query.forEach(ptag => {
    const shadow = ptag.attachShadow({
      mode: shadowMode
    });
    const element = document.createElement(elementTag);
    element.innerHTML = ptag.innerHTML;
    shadow.host.parentNode.replaceChild(element, shadow.host);
  });
};

const h1 = foo('h1', 'open');
const h2 = foo('h2', 'open');
const div = foo('div', 'closed');

h1('city-name');
h2('we-data');
h2('temp-data');
div('weather-app');

<weather-app>
  <city-name>London</city-name>
  <we-data>Rains</we-data>
  <temp-data>15 C</temp-data>
  <city-name>Hi. Does this resemble h1 text?</city-name>
</weather-app>

Answer 4

To achieve the desired outcome, consider utilizing shadow.host and replaceChild(), as suggested in a previous response by @Carsten Løvbo Andersen.
.querySelector() retrieves the first matching element, while .querySelectorAll() gathers all matches, necessitating the use of .querySelectorAll().
The functions for h1, h2, and div share notable similarities - here's an adjusted version:

const foo = (elementTag, shadowMode) => tag => {
  const query = document.querySelectorAll(tag);
  query.forEach(ptag => {
    const shadow = ptag.attachShadow({
      mode: shadowMode
    });
    const element = document.createElement(elementTag);
    element.innerHTML = ptag.innerHTML;
    shadow.host.parentNode.replaceChild(element, shadow.host);
  });
};

const h1 = foo('h1', 'open');
const h2 = foo('h2', 'open');
const div = foo('div', 'closed');

h1('city-name');
h2('we-data');
h2('temp-data');
div('weather-app');

<weather-app>
  <city-name>London</city-name>
  <we-data>Rains</we-data>
  <temp-data>15 C</temp-data>
  <city-name>Hi. Does this resemble h1 text?</city-name>
</weather-app>

You are limited to using a maximum of two custom tags within a custom div

Answer №1

Answer №2

Similar questions

Is there a way to execute a javascript function that is located outside of my Angular application without having to import it?

What is the best way to right-align a label in a vertical MUI Slider in ReactJS?

Having trouble making jQuery code disable input field based on checkbox status

Choose ng-change within the table

Modify the appearance of an element within an array upon selection by comparing it with a separate array

Issue with border radius not applied to input-group in Bootstrap 3

Material UI in React: A lengthy typography body necessitates a line break

Foundation 5 - ensure background-image covers the entire column width

Is there a way to alter a class using ng-class only when the form is deemed valid?

Error in browser caused by JQuery JavaScript, not Dreamweaver

What is the method for implementing type notation with `React.useState`?

Servlet unable to retrieve parameters from Form due to unexpected NULL values

typescript error is not defined

Buttons are not aligned with the rest of the row's height

Using javascript to dynamically change text color depending on the selected item

The validation feature is ineffective when used with Material UI's text input component

Error encountered in loop for concatenating html elements: identifier unexpectedly found (jquery + html + php)

Ways to display the page's content within a div container utilizing Jquery

Is there a way to apply padding to a div element that has a display property set to table-cell?

Looking to transition from Node.js version v4.4.5 to v6.11.0 on your Windows system?