Widget IDs should validate in the setter, Widget.query should produce a sensible error when invalid

[willmcgugan]

Discussed in https://github.com/Textualize/textual/discussions/658

^{Originally posted by davep August 7, 2022} I felt this was more of a question than an issue to raise to start with. Something I've noticed while playing with Textual the last week is that widgets can be built with IDs that aren't accepted by other parts of the library, especially stylesheets and performing queries. This can be shown with this little example:

from textual.app import App
from textual.widgets import Button


class IDTester(App):

    CSS = """
    Button { width: 100%; height: 100%; }
    """

    BAD_ID = "1-button"

    def compose(self):
        yield Button("Push Me", id=self.BAD_ID)

    def handle_pressed(self, event):
        _ = self.query(f"#{self.BAD_ID}")


if __name__ == "__main__":
    IDTester().run()

I can create the Button with an id of 1-button, but if I press it the app crashes inside the query:

 Error in stylesheet:
 <unknown>:0:0
╭────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│   1 #1-button                                                                                                                                              │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
 • expected WHITESPACE, COMMENT_START, SELECTOR_START_ID, SELECTOR_START_CLASS, SELECTOR_START_UNIVERSAL, SELECTOR_START, VARIABLE_NAME

Is it a design choice to accept IDs in an "invalid" format but treat them as an error elsewhere, or more of an oversight at the moment and perhaps widgets should throw an exception if using an ID of a format Textual doesn't support?

Also, as a related question: is it a bit weird that the error is saying the problem is in the stylesheet when that mention of the problematic ID isn't in the stylesheet?