CSS Styles Not Applied Properly,If Use Doctype

Css styles not applied properly,if use DOCTYPE

The problem is that the div is set to 100% of 100% (the body) this makes sence to us but not to the browser. If you set the body position to absolute and set it's top, bottom, left, right to 0, you get the same effect and the div's height setting will work the way you expect. Here's the code.

<!DOCTYPE html>

<html> 
<head>
<title>Test</title>
</head>
<body style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;background-color:green;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>

Does HTML5 DOCTYPE affect how CSS3 effects are rendered?

There is almost no difference* between those two doctypes in terms of CSS rendering.

The choice of doctype only affects validation, and which "browser mode" is used out of "Quirks Mode", "Standards Mode" ("no quirks mode"), "Almost Standards Mode" ("limited quirks mode").

See: http://hsivonen.iki.fi/doctype/

So, XHTML 1.0 Transitional gives "Almost Standards Mode", whereas <!DOCTYPE html> gives "Standards Mode".

*One difference is a minor and easily fixable adjustment concerning tables. Another is the treatment of heading elements nested inside certain HTML5 elements.

Adding <!DOCTYPE html> to my code prevents CSS external rules from applying

That JS you have in your body is whacked, the syntax is all wrong. Also that PHP won't process if it's in a straight html file as it will not run through the php parser. I'd reckon that's your issue right there. PHP is a preprocessor that generates html, you cant just put it in an html file and have it run. Since it's in a script tag and in the head, it won't output in the body, but if you use inspector in whatever browser you're using, you'll see it in the script tag in the markup.

The reason the PHP is parsing without the doctype declaration, is I am assuming because whatever server you're running this code on is assuming it's a php file instead of html. If you want to deliver dynamic css via a php file, you could call the php file externally like you would a css file eg: mysite.com/style.php.

Don't forget that if you're delivering dynamic css to users, to practice proper sanitization prior, eg using CSS tidy or some other method of validation and escaping. Ideally if you can do so, do the escaping/sanitizing on save, rather than on delivery, to lower overhead on your server for every call as well as to speed up the delivery to the end user. However, that's somewhat irrelevant if you're caching the css anyways.

Style.php would look something like this.

echo header("Content-type: text/css");
header("Pragma: nocache");
header("Cache-Control: no-cache, must-revalidate");
header("Last-Modified: " . date("D, d M Y H:i:s") . " GMT");
echo $css_stuffz_goes_here;
exit // or die

CSS files ignored when using HTML5 doctype

Are you sure you're sending the right content-type header for those files? I see you're using Java to generate the CSS. Without the proper content type the browser may not understand or honor them.

Content-type: text/css

<!DOCTYPE html> changes input textbox size (height and width)

Add the code below to your lower input to include padding and border in the element's total width and height. This should solve it.

box-sizing: border-box;

CSS not working properly on Custom HTML Elements

Additionally to Brad's answer. One of the ways you can apply styles from the Light DOM to the Shadow DOM is with CSS Variables.

smooth-button{
  display: block;

  --button-color: blue;
  --button-background-color: orange;
}

render() {
  this.shadow.innerHTML = `
    <style>
      button {
        color: var(--button-color);
        background-color: var(--button-background-color);
      }
    </style>

    <button>
      ${this.getAttribute("text")} ${this.SumOfNo1AndNo2}   
    </button>
  `;
)

CSS Styles Not Applied Properly,If Use Doctype