如何为元素及其所有子元素添加/更新style属性？（fillPage场景）

Your recursive approach to apply height: 100% to all elements and their children is a solid start! But there are a few refinements we can make to handle style merging more cleanly and avoid edge cases. Let's break this down:

Issues with Your Current Implementation #

• Messy Style Duplication: When an element already has a style attribute, your code appends height: 100%; directly, leading to duplicate declarations (like height:400px; height:100%;). While CSS will use the last declaration, this is unpolished and could cause confusion if you ever need to debug styles.
• Lack of Targeted Checks: The function checks if x is a list but doesn't explicitly verify it's a valid shiny.tag or shiny.tag.list, which could lead to unintended behavior with non-tag elements (like raw text nodes).

Improved Implementation #

Here's a revised version that merges styles properly, preserves existing non-height styles, and adds robust tag validation:

library(htmltools)
library(purrr)

tagAppendAttributesAll <- function(x, ...) {
  # Skip processing if not a shiny tag or tag list
  if (!inherits(x, c("shiny.tag", "shiny.tag.list"))) {
    return(x)
  }
  
  # Handle tag lists by applying the function to each child tag
  if (inherits(x, "shiny.tag.list")) {
    x[] <- map(x, tagAppendAttributesAll, ...)
    return(x)
  }
  
  # Recursively process all child elements first
  x$children <- map(x$children, tagAppendAttributesAll, ...)
  
  # Merge new attributes, focusing on clean style handling
  new_attrs <- list(...)
  if (!is.null(new_attrs$style) && !is.null(x$attribs$style)) {
    # Remove any existing height declaration from the element's style
    existing_style <- gsub("height:\\s*[^;]+;?", "", x$attribs$style)
    # Combine cleaned existing style with new style, trim extra semicolons
    combined_style <- paste(trimws(existing_style), trimws(new_attrs$style), sep = "; ")
    combined_style <- gsub(";\\s*;", ";", combined_style)
    combined_style <- trimws(combined_style, whitespace = ";\\s")
    x$attribs$style <- combined_style
  } else {
    # Use standard tagAppendAttributes if no style conflict
    x <- tagAppendAttributes(x, ...)
  }
  
  return(x)
}

tagSetFullHeightAll <- function(x) {
  tagAppendAttributesAll(x, style = "height: 100%;")
}

# Test the improved function
print(tagSetFullHeightAll(
  div(
    div(
      div("test"), style = "height: 400px; color: red;"
    )
  )))

Output of the Improved Version #

<div style="height: 100%;">
  <div style="color: red; height: 100%;">
    <div style="height: 100%;">test</div>
  </div>
</div>

Key Improvements #

• Clean Style Merging: Existing height declarations are removed before adding height:100%, eliminating duplication while preserving other styles (like color: red in the example).
• Targeted Tag Handling: We only process valid shiny.tag and shiny.tag.list objects, avoiding unnecessary work on non-tag elements.
• More Maintainable Code: The style merging logic is explicit, making it easier to adjust if you need to add other style properties later.

Alternative: Use CSS Instead of Programmatic Tag Modification #

If you're working in a Shiny app, another clean option is to use CSS to target all elements in a container. This avoids modifying tags programmatically:

.full-height-container * {
  height: 100% !important;
}

Then wrap your content in the container:

div(class = "full-height-container",
  div(
    div("test"), style = "height:400px;"
  )
)

This leverages CSS cascading and is often more maintainable for large apps.

内容的提问来源于stack exchange，提问作者krlmlr