HTML <shadow> tag
You are Here:
HTML <shadow> tag
The <shadow> tag is intended to be used as a shadow DOM insertion point.
Warning: The <shadow> tag is deprecated and is no longer recommended.
Example
HTML Online Editor
<!DOCTYPE html>
<html>
<body>
<div>
<h4>Heading will Change</h4>
<p>paragraph will not Change</p>
</div>
<script>
// Selecting target element
var myContent = document.querySelector('div');
// Create a first shadow root
var shadowroot1 = myContent.createShadowRoot();
// Create a second shadow root
var shadowroot2 = myContent.createShadowRoot();
// Change the heading and keep the paragraph
shadowroot1.innerHTML = '<h2>Heading Changed</h2>'
// Insert into younger shadow root, including <shadow>
// Previous markup will not be displayed unless <shadow> is used below
shadowroot2.innerHTML = "<shadow></shadow><p>Younger shadow root, displayed because it is the youngest.</p>"
</script>
</body>
</html>
Attributes
There is no special attributes for <shadow> tag.
Reminder
Hi Developers, we almost covered 99.5% of HTML Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in HTML.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
