Question 249643 in Html Question posted in
Some basic documentation can be found here.

can use html img tag as custom tag like <image src="">?

<!DOCTYPE html>
<html>
<head>
<style>
image {
  border: 5px solid red;
}
</style>
</head>
<body>
<image src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow">
</body>
</html>

border not applying in HTML custom image tag. is possible to fix?

border not applying in HTML custom image tag. is possible to fix? i want image tag with border not changing <img> tag.

Tags:

3

Answers


  1. 0

    You could add an id that way you won’t change the border of all img, just the one with the id.

    <!DOCTYPE html>
<html>

<head>
  <style>
    #image {
      border: 5px solid red;
    }
  </style>
</head>

<body>
  <img id="image" src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow">
</body>

</html>
    Login or Signup to reply.
  2. 0

    If you want to use a custom tag like instead of for your image element and set a custom attribute for the source, you can do so using HTML5’s Custom Elements (also known as Web Components). Custom Elements allow you to define your own custom HTML elements with custom behavior. Here’s how you can create a custom element:

    class CustomImage extends HTMLElement {
      constructor() {
          super();
      }

      connectedCallback() {
          // Get the value of the custom-src attribute
          const customSrc = this.getAttribute('custom-src');
          if (customSrc) {
              // Create an <img> element
              const img = document.createElement('img');
              img.src = customSrc;

              // Append the <img> element to the custom <image> element
              this.appendChild(img);
          }
      }
  }

  customElements.define('custom-image', CustomImage);
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Image Element Example</title>
</head>
<body>
    <!-- Use the custom <image> element with a custom-src attribute -->
    <custom-image custom-src="https://www.w3schools.com/howto/img_snow.jpg"></custom-image>
</body>
</html>

    In this code, we define a CustomImage class that extends HTMLElement. When a custom-image element is added to the DOM, the connectedCallback method is called. Inside this method, we read the custom-src attribute and create an element with the specified source. We then append the element to the custom element.

    Login or Signup to reply.
  3. 0

    If you really wants to do this you can with web components custom element

    https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements

    This will attach the real img tag to the shadow root.

    Because the img tag is in shadow root you cannot modify the style from outside and need to change the style from the CustomImage class

    But because web component tag name must include - you can’t use image as the tag name instead use custom-image

    class CustomImage extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({
      mode: "open"
    });

    const src = this.getAttribute('src') ?? '';
    const alt = this.getAttribute('alt') ?? '';

    const img = document.createElement('img');
    img.src = src;
    img.alt = alt;

    const style = document.createElement("style");
    style.textContent = `img { border: 5px red solid; }`;

    this.shadowRoot.append(style, img);
  }

}

customElements.define("custom-image", CustomImage);
    <custom-image src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search