When I add children to the web component from outside, adding as reveal will it be a problem for it to benefit from the shadow dom?
When the Custom Element has shadowDOM,
Slotted lightDOM content is reflected to <slot> elements in shadowDOM
The reveal button in F12 tools takes you to the current slotted lightDOM content
Also see: ::slotted CSS selector for nested children in shadowDOM slot
Related
I want to style ng-container like add borders when on hover or show a button inside this tags on hover but this isn't possible. ng-container doesn't seem to be responsive to styling. Is rendered on DOM and if not what can I use to access it?
According to Angular official docs <ng-container> is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM. It's only meant to be used as a container for structural directives when you need some HTML elements immediate children to be of a specific type. For styling you would have to go with regular elements instead.
I have a <section> element that I want to set focus within only when the first child element receive focus but not the second. I tried using the :not pseudo-class but that didn't work out.
Worth noticing that I still need to have focus on the second element, just don't want to have two focused elements (parent + child) as the example below.
Codepen example
Better if a HTML/CSS only hack/solution.
":focus-within" makes the parent element to have focus if any of its children have focus itself. You can't do this only with css, as you can only select elements that are siblings or children, except for this unusual case that selects the parent (even though you can't select which element has focus inside). You are applying the focus within to the section, not to the children.
Is it possible and how to persist DOM elements transformation applied via CSS transition. The case is simple animate a DOM element with CSS and on animation complete I want to persist the DOM element in the complete animation state and remove the CSS style with which I have applied the transformations.
Something that I was wondering while styling my latest HTML5/CSS3 baby: Do some elements inherit their sibling's parameter's values if we won't specirfy the parameters and values for these elements? Basically I had a situation in which 3/4 of the website's home page elements have been styled already in stylesheet and what was left was the footer section.
Last element that I've styled was a boxcontent with two columns. The columns have been styled with a float:left parameter and value. Upon that when I've reloaded the page, the footer section which is not styled like I've mentioned before, have moved up and to the extreme right from column2 of boxcontent section.
I'm wondering why the footer section has inherited some of the sibling's section's parameters and values if the footer is not even inheriting this data straight from it's parent element - that is body.
Children inherit parent's values, but siblings do not inherit each other's parameters. Your layout was changed, because you've used floating, which can affect positioning of elements that are below the floated blocks. When using floating for positioning it is a good idea to clear floats.
Elements don't inherit siblings styles, but do inherit their parent's styling. I've ran into layout issues that I've traced up many levels on a parent. Chrome's developer tools are a great way to inspect where styling is coming from for any selected element.
<pseudo> </pseudo> ?
The pseudo-elements of CSS are not in the DOM. But internally they must be equivalent to some kind of generic HTML element, since they can be styled, can be visible, and they affect the page flow.
What is the element type of a pseudo element?
And can we programmatically create them, without using CSS?
Pseudo-elements have no element type as far as the document language is concerned because, as you state, they don't exist in the DOM, and as can be inferred from the "pseudo-" prefix, they're not "real" elements. CSS just calls them pseudo-elements, however you have different pseudo-elements for different purposes or different parts of element structures, such as the self-explanatory ::first-letter and ::first-line, and ::before and ::after for generating content before and after an element's actual content.
That pseudo-elements affect the page flow has nothing to do with the DOM. A browser uses CSS to lay out and format DOM elements into objects that can be rendered to the screen, and in the process of doing so creates pseudo-elements as descendants of boxes that are made for real elements. Although you typically attach a pseudo-element to an element, you're not altering the DOM in any way; instead, you're simply altering how the browser lays out a page.
Because pseudo-elements are a concept unique to CSS (defined in the Selectors module), you cannot create them using anything other than CSS. The implementation of pseudo-elements as a CSS concept is defined in CSSOM instead, which is the CSS equivalent of the DOM (and where methods like window.getComputedStyle() are defined). However I'm not very familiar with the CSSOM, so I can't comment further than that they're implemented very similarly to real elements in terms of CSS.